Bootsrap zobrazenie DIV elementu v popredi [vyriešené]

trpaslik8 · Napísal **trpaslik8**: 03.03.2018 14:18

Ahojte,

Pracujem na JS aplikacii, ktora mi ale z casti generejuje FE a nadabil som na problem, s ktorym si neviem pomoct. Ide o to, ze pri kliknuti na dropdown tlacidlo potrebujem zobrazit menu uplne v popredi. Vytiahol som kus HTML, z vygenerovaneho FE: https://jsfiddle.net/DTcHh/49488/

Viem, ze ukazka nie je nic moc (vyhodil som vela zbytocneho HTML a class), no znazornuje dobre tento problem.
TEST zobrazuje zle, kedze dane menu skryva pod dalsie elementy. TEST2 je uz OK. Viem ze sa to riesit pomocou pozicie - fixed, no nie je to pre mna dobre riesenie. Je na toto nejake riesenie? Potreboval by som to urgentne. Pripadne sa vieme dohodnut aj na financnej kompenzacii.

F3RY · Napísal **F3RY**: 04.03.2018 13:12

Ak das na tie parenty position relative, nepomoze? Pripadne vyskusaj pouzit z-index.

trpaslik8 · Napísal autor témy **trpaslik8**: 04.03.2018 16:58

No to uz som skusal a nic nezabera...

void · Napísal **void**: 04.03.2018 20:50

z-index poznas?

trpaslik8 · Napísal autor témy **trpaslik8**: 04.03.2018 21:58

Poznam, ale este som ho predtym vobec nepouzil. Skusal som vsetkym parentom nastavit z-inodex na 1 a danemu childu z-index na 999 + som pouzil aj !important, aby ho nohodou bootstrap niekde neprepisal. No vysledok ostal rovnaky. Asi neviem, ako ho pouzit na tento problem.

trpaslik8 · Napísal autor témy **trpaslik8**: 06.03.2018 10:44

Nikto nic?

unset(array[0]) · Napísal **unset(array[0])**: 06.03.2018 11:10

z ukazky vidim, ze ten dropdown je uplne niekde hore, kde by ani nemal byt.

chces ho presunut aby po otvoreni bol tam kde mal - zo slova dropdown - dole pod buttonom?

pouzi css .dropdown-menu { bottom: -50px; }

a neda sa mi nevyjadrit, bootstrap kod je hnus a v produkcii by som ho v zivote nepouzil. na nejake prototypovanie ok ale ak sa ma nieco menit a prepisovat tak dakujem pekne, neprosim.

trpaslik8 · Napísal autor témy **trpaslik8**: 06.03.2018 13:13

Dakujem za odpoved. Praveze nejde o klasicky dropdown. Zobrazuje to dobre - nad tlacitom. Teraz je float vlavo, no v mojej aplikacii to zarovnava priamo nad tlacidlo. (nejake css som povyhadzoval z ukazky, aby to nekomplikovalo). S bootstrapom som spokojny vacsinou si viem vsetko ponastavovat sam (aj ked niesom grafik) a vyzera to dobre. Navyse riesi responsivitu. Terminy tlacia, no ja stale neviem pohnut s tymto problemom.
Pripadne, ako hot fix to asi dam pod button, ale nesmie ho nic prekryvat

void · Napísal **void**: 06.03.2018 14:26

robi ti to overflow-y: scroll; v element.style divu, v ktorom sa nachadzaju gombiky.

ma triedy: class="panel-body ui-droppable" v tom jsfiddle.

trpaslik8 · Napísal autor témy **trpaslik8**: 06.03.2018 14:35

Super, dakujem ti. Velmi si mi pomohol. Ten som tam dal preto, ak height vo vnutri presiahne svoju vysku, tak nech sa element nenatahuje, ale da tam scrollbar. Ani som netusil, ze toto moze takto ovplyvnit. To si uz nejako potom osetrim. Kazdopadne problem vyrieseny

trpaslik8 · Napísal autor témy **trpaslik8**: 15.03.2018 15:37

Tak otvaram znova tuto temu. V poziadavkach mame definovane, ze scrollbar musi byt. Ak dam na element s triedami "row body list-group-item" absolutnu poziciu, tak ten dropdown zobrazi. Problem je v tom, ze to nemozem prerobit na absolutne pozicie, pretoze dany element je interaktivny (ma dropable, dragable, sortable). Toto by nezahralo. Je nejaka moznost, ako tam spravit scrollbar bez overflow, pripadne ako zobrazit korektne dropdown aj s overflowom? Dakujem

F3RY · Napísal **F3RY**: 17.03.2018 2:46

Z-index?

Ine ma zatial nenapada.

void · Napísal **void**: 17.03.2018 13:35

Alebo daj priestor nad to zobrazovanie toho menu nad tym buttonom, tak aby to bolo vidiet.
Kazdopadne vnutorne scrollbary su otrava a asi som sa este nestretol s tym, ze by to bolo dobre rozhodnutie z hladiska UX, iba ze sa jedna o selectovatelne listy. (FB chat napr)

trpaslik8 · Napísal autor témy **trpaslik8**: 18.03.2018 18:59

Dakujem za odpovede. Vazim si kazdu pomoc. Ten Z-index mi nijak nefunguje, skusal som to v roznych kombinaciach

Nemyslim si, ze by som bol do JS / jQuery nejaky lajk, ale tu sa vazne neviem pohnut. Vyrabam specificku aplikaciu, ten scrollbar je najlepsia moznost, pretoze pocet tychto "kariet" zalezi od pouzivatela. Moze byt ich tam aj 20, lenze vyska aplikacie je fixnuta na 1 okno obrazovky (to bola poziadavka).
Priestor tiez nic neriesi, pretoze ten je dynamicky. Niekedy tam nemusi byt nic, niekedy aj 5 riadkov, teda toto neviem povedat, kolko to bude mat vysku.

Ako zachrannu brzdu skusam toto riesit pomocou JS. Pri kliknuti na dropdown-toggle prida parentu triedu open. Klik si odchytim v JS a podla toho nastavujem overflow.

Kód:

   $(document).on("click",".dropdown-toggle",function () {

         if ($(this).parent().hasClass('open')){
            $('.command-list').css('overflow','visible');
         }
         else{
            $('.command-list').css('overflow','auto');   
         }
      
   });      

Toto funguje fajn, ale len ak pouzivatel klikne na to tlacitko. Ak sa po otvoreni dropdown menu klikne na option, alebo mimo plochy, tak sa dropdown zavrie, ale JS uz toto neodchyti a overflow ostane na visible.
Mozno by to chcelo skontrolovat, ci nastala zmena triedy (ci existuje open)

Toto riesenie sa mi ale nepozdava, pretoze pouzivatelovi okno preblikuje, co nie je dobre...

F3RY · Napísal **F3RY**: 19.03.2018 15:19

Zistenie zmeny triedy sa riesi tak, ze si nastavis timer a interval a v nejakom case budes kontrolovat, ci ake triedy ma element:
https://stackoverflow.com/questions/9599818/jquery-detect-class-changes

Kód:

function checkForChanges()
{
    if ($('.slide-out-div').hasClass('open'))
        $('.otherDiv').css('top','0px');
    else
        setTimeout(checkForChanges, 500);
}

Pripdane sa da zadefinovat trigger. S tym ale skusenosti nemam.

Kazdopadne na tento problem by som JS vobec nepouzil. Urcite sa to da vyriesit pomocou CSS. Navyse to riesenie z pouhladu UX je asi najhorsie, kedze pouzivatelovi, pri rozkliku dane karticky "vyskocia". (Ak tomu spravne rozumiem)

void · Napísal **void**: 19.03.2018 16:24

Problem je ze robis nasledovne: zoberes bootstrap (lego) a snazis sa z toho poskladat hladku gulu... nie ze by sa to nedalo, ale nikto to tak nemyslel ze sa to pouzije. Alobo pouzivas zle triedy (kocky)

Ak ma klient velmi presne poziadavky a vie co chce (gratulujem ti k najlepsiemu vyberu zakaznika... ozaj, bez srandy... neveril som ze taki su) tak to treba zrobit na mieru, nie skladat z niecoho z coho sa to circa da.
Ak to chces skladat, tak ho musis presvedcit ze chce to, co mu ponukas a ukazat mu to tak. Imo si zabil viac casu hackovanim bootstrapu ako realnou pracou

trpaslik8 · Napísal autor témy **trpaslik8**: 19.03.2018 16:45

F3RY píše:

Kazdopadne na tento problem by som JS vobec nepouzil. Urcite sa to da vyriesit pomocou CSS. Navyse to riesenie z pouhladu UX je asi najhorsie, kedze pouzivatelovi, pri rozkliku dane karticky "vyskocia". (Ak tomu spravne rozumiem)

Rozumies tomu dobre. Suhlasim s tebou. Ten JS je posledna moznost, ked nic ine nezafunguje.

@void
Uz som na to prisiel, ze bootsrap ma nie vsetko riesene idealne. Uz mam finalnu verziu, teda nechcel by som robit dramaticky zasah do aplikacie. (Ten dropdown by sa dal zmenit na selectbox a bolo by vsetko OK), ibaze toto uz je odsuhlasene, otestovane... Jedine co potrebujem je zobrazenie dropdownu cez overflow, bez absolutnej pozicie.

Napada Vas pls este nieco?
Pripadne vedel by ma niekto nasmerovat, ako pouzit ten z-index?
Dakujem

F3RY · Napísal **F3RY**: 22.03.2018 13:53

Este je moznost to, co navrhoval void. Ak je ten dropdown dynamicky, vies si zistit jeho velkost pri zobrazeni. Vies si zistit ci ide o prvy element v tom ul (cez jQuery sa pouziva .index() ), nastavis ul pading-bottom o velkost dropdownu. Overflow moze ostat na auto. Sice som spominal, ze toto nie je dobre riesit cez JS, ale myslim, ze je to lepsia moznost, ako switchovat overflow.

Bootsrap zobrazenie DIV elementu v popredi [vyriešené]

Podobné témy