Schowana lista <select> pod div'em

0

Witam,

Buduje prostego CRM'a korzystając z Bootstrapa w wersji 4.1 Na górnej belce znajduje się menu, którego jest przyklejone do góry strony klasą "sticky-top" (link). W momencie gdy lista <select> rozwija się ku górze, jej górna cześć chowa się pod menu. Widoczne jest to na załączonym screenie. Czy jest jakiś sposób by lista ta (warto chyba nadmienić, że korzystam z bootstrap-select) była zawsze widoczna w całości? Lub co byłoby jeszcze lepszym rozwiązaniem - przeglądarka nie widziała górnej belki jako pola działania? Coś na zasadzie zdeprecjonowanych <frame>.

0

,klasą "sticky-top nie prościej zrobić to komponenty->Navs/Navbar od razu masz mobile również

0
czysteskarpety napisał(a):

,klasą "sticky-top nie prościej zrobić to komponenty->Navs/Navbar od razu masz mobile również

Dokładnie w ten sposób mam.

<nav class="navbar sticky-top justify-content-between">

z pliku bootstrap.css

  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
0

Musiałbyś zobaczyć w narzędziach google
https://developers.google.com/web/tools/chrome-devtools/
jak wyglądają klasy przy hover czy focus być może trzeba wyregulować margin, padding, ciężko wróżyć ze screena.

0
czysteskarpety napisał(a):

Musiałbyś zobaczyć w narzędziach google
https://developers.google.com/web/tools/chrome-devtools/
jak wyglądają klasy przy hover czy focus być może trzeba wyregulować margin, padding, ciężko wróżyć ze screena.

Zarówno hover jak i focus są puste. Zabawa z marginesami nie daje oczekiwanego efektu. Jedyne doraźne rozwiązanie to zmiana z-index (listy select osadzane są na z-index: 1000), wtedy lista wyświetla się nad paskiem menu. Rozwiązaniem idealnym byłoby gdy przeglądarka nie widziała tej przestrzeni jako pola dostępnego dla listy. Niestety tego nie wiem jak zrobić

1 użytkowników online, w tym zalogowanych: 0, gości: 1