[ Príspevkov: 18 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov

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.


Offline

Užívateľ
Užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 23.12.10
Prihlásený: 26.03.19
Príspevky: 1055
Témy: 156 | 156
Bydlisko: KK/PP/BA

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


_________________
HP ProBook 4530s Intel® Core™ i5-2430M (2.4GHz, 3MB, 2 jadrá)*4GB 1333MHz DDR3*ATI Mobility Radeon HD 6490 1GB + Intel HD Graphics 3000*640GB SATA 5400RPM *Windows 7 Home Premium 64 bitová verzia
Lenovo IdeaPad Z50-70 Intel Core i5 4210 Haswell* NVIDIA GeForce GT 840M 4GB + Intel HD Graphics 4000*SSHD 1TB 5400 otáčok + 8GB cache*RAM 4GB* Full HD (1920 × 1080)*Windows 10 pro

Boh je reálny, pokial nebol deklarovaný ako integer
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 04.03.2018 16:58 | Bootsrap zobrazenie DIV elementu v popredi

No to uz som skusal a nic nezabera... :(


Offline

Skúsený užívateľ
Skúsený užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 19.03.07
Prihlásený: 17.09.19
Príspevky: 6381
Témy: 80 | 80
Bydlisko: BA

z-index poznas?


_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA Powercolor VEGA56 | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS,Crucial M4 128GB | ARCH x64 & Notebook: MS Surface 2017 i5/8GB/128GB &
Mobil: Samsung A7 (2018) & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 04.03.2018 21:58 | Bootsrap zobrazenie DIV elementu v popredi

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.


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 06.03.2018 10:44 | Bootsrap zobrazenie DIV elementu v popredi

Nikto nic? :(


Offline

Zmazaný užívateľ
Zmazaný užívateľ
Obrázok užívateľa

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.


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 06.03.2018 13:13 | Bootsrap zobrazenie DIV elementu v popredi

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


Offline

Skúsený užívateľ
Skúsený užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 19.03.07
Prihlásený: 17.09.19
Príspevky: 6381
Témy: 80 | 80
Bydlisko: BA

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.


_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA Powercolor VEGA56 | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS,Crucial M4 128GB | ARCH x64 & Notebook: MS Surface 2017 i5/8GB/128GB &
Mobil: Samsung A7 (2018) & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 06.03.2018 14:35 | Bootsrap zobrazenie DIV elementu v popredi

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 :)


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 15.03.2018 15:37 | Bootsrap zobrazenie DIV elementu v popredi

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


Offline

Užívateľ
Užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 23.12.10
Prihlásený: 26.03.19
Príspevky: 1055
Témy: 156 | 156
Bydlisko: KK/PP/BA

Z-index? :) Ine ma zatial nenapada.


_________________
HP ProBook 4530s Intel® Core™ i5-2430M (2.4GHz, 3MB, 2 jadrá)*4GB 1333MHz DDR3*ATI Mobility Radeon HD 6490 1GB + Intel HD Graphics 3000*640GB SATA 5400RPM *Windows 7 Home Premium 64 bitová verzia
Lenovo IdeaPad Z50-70 Intel Core i5 4210 Haswell* NVIDIA GeForce GT 840M 4GB + Intel HD Graphics 4000*SSHD 1TB 5400 otáčok + 8GB cache*RAM 4GB* Full HD (1920 × 1080)*Windows 10 pro

Boh je reálny, pokial nebol deklarovaný ako integer
Offline

Skúsený užívateľ
Skúsený užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 19.03.07
Prihlásený: 17.09.19
Príspevky: 6381
Témy: 80 | 80
Bydlisko: BA

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)


_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA Powercolor VEGA56 | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS,Crucial M4 128GB | ARCH x64 & Notebook: MS Surface 2017 i5/8GB/128GB &
Mobil: Samsung A7 (2018) & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 18.03.2018 18:59 | Bootsrap zobrazenie DIV elementu v popredi

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...


Offline

Užívateľ
Užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 23.12.10
Prihlásený: 26.03.19
Príspevky: 1055
Témy: 156 | 156
Bydlisko: KK/PP/BA

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)


_________________
HP ProBook 4530s Intel® Core™ i5-2430M (2.4GHz, 3MB, 2 jadrá)*4GB 1333MHz DDR3*ATI Mobility Radeon HD 6490 1GB + Intel HD Graphics 3000*640GB SATA 5400RPM *Windows 7 Home Premium 64 bitová verzia
Lenovo IdeaPad Z50-70 Intel Core i5 4210 Haswell* NVIDIA GeForce GT 840M 4GB + Intel HD Graphics 4000*SSHD 1TB 5400 otáčok + 8GB cache*RAM 4GB* Full HD (1920 × 1080)*Windows 10 pro

Boh je reálny, pokial nebol deklarovaný ako integer
Offline

Skúsený užívateľ
Skúsený užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 19.03.07
Prihlásený: 17.09.19
Príspevky: 6381
Témy: 80 | 80
Bydlisko: BA

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 :D


Naposledy upravil void dňa 19.03.2018 16:51, celkovo upravené 1

_________________
Desktop: CPU AMD R7 1700x @ 3.85GHz | Cooling be quiet! Dark Rock Pro 4 | MB ASRock X470 Taichi Ult. | RAM 4x8GB DDR4 G-SKILL TridentZ RGB 3000 CL16-16-16-36 | VGA Powercolor VEGA56 | SSD Crucial MX300 525GB | HDD Seagate Ironwolf 3TB 5900rpm | PSU CORSAIR RM750X | MONITOR AOC Q3279VWFD8 | MOUSE HyperX Pulsefire FPS + Razer eXactMat | HyperX Alloy FPS Brown | HyperX Cloud | ARCH x64 &
Notebook: DELL inspiron 7537 i7 4500U, 8GB RAM, nv750, FHD IPS,Crucial M4 128GB | ARCH x64 & Notebook: MS Surface 2017 i5/8GB/128GB &
Mobil: Samsung A7 (2018) & SBC: Raspberry pi 0 | 3B+ & Headphones: Senheiser HD58X | AKG K551 + detachable cable mod | Linsoul TIN T2 | KZ SZN
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.09.12
Prihlásený: 13.05.18
Príspevky: 62
Témy: 21 | 21
Bydlisko: Trebisov
Napísal autor témyOffline : 19.03.2018 16:45 | Bootsrap zobrazenie DIV elementu v popredi

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


Offline

Užívateľ
Užívateľ
Bootsrap zobrazenie DIV elementu v popredi

Registrovaný: 23.12.10
Prihlásený: 26.03.19
Príspevky: 1055
Témy: 156 | 156
Bydlisko: KK/PP/BA

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. :)


_________________
HP ProBook 4530s Intel® Core™ i5-2430M (2.4GHz, 3MB, 2 jadrá)*4GB 1333MHz DDR3*ATI Mobility Radeon HD 6490 1GB + Intel HD Graphics 3000*640GB SATA 5400RPM *Windows 7 Home Premium 64 bitová verzia
Lenovo IdeaPad Z50-70 Intel Core i5 4210 Haswell* NVIDIA GeForce GT 840M 4GB + Intel HD Graphics 4000*SSHD 1TB 5400 otáčok + 8GB cache*RAM 4GB* Full HD (1920 × 1080)*Windows 10 pro

Boh je reálny, pokial nebol deklarovaný ako integer
 [ Príspevkov: 18 ] 


Bootsrap zobrazenie DIV elementu v popredi



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

ziskanie textu DIV elementu

v JavaScript, VBScript, Ajax

2

532

14.09.2007 19:44

Bananslovak

V tomto fóre nie sú ďalšie neprečítané témy.

Plynulé zobrazenie elementu (Javascript)

v JavaScript, VBScript, Ajax

8

554

27.12.2007 14:48

pepek92

V tomto fóre nie sú ďalšie neprečítané témy.

menu na celu sirku elementu div (nie table layout)

v HTML, XHTML, XML, CSS

23

932

17.05.2010 18:50

Merlin_sk

V tomto fóre nie sú ďalšie neprečítané témy.

Zobrazenie 2 DIV-ov v case

v HTML, XHTML, XML, CSS

4

186

24.06.2016 16:28

baumax

V tomto fóre nie sú ďalšie neprečítané témy.

Ako prinútiť jeden div, aby sa ovládal cez druhý div

v JavaScript, VBScript, Ajax

14

357

22.04.2014 9:45

Mego

V tomto fóre nie sú ďalšie neprečítané témy.

Okno v popredi stranky

v JavaScript, VBScript, Ajax

1

164

15.12.2012 0:26

Ďuri

V tomto fóre nie sú ďalšie neprečítané témy.

Poznámky na ploche vždy v popredí.

v Ostatné programy

1

176

20.10.2014 11:14

Mandy

V tomto fóre nie sú ďalšie neprečítané témy.

načo slúžia tagy <div id="all"> a <div

v HTML, XHTML, XML, CSS

3

769

06.10.2008 17:50

neutronmind

V tomto fóre nie sú ďalšie neprečítané témy.

Zistenie sirky elementu

v JavaScript, VBScript, Ajax

6

298

06.12.2011 18:46

zaciatocnik

V tomto fóre nie sú ďalšie neprečítané témy.

JS klonovanie elementu do canvasu

v JavaScript, VBScript, Ajax

7

312

27.11.2014 10:05

chrono

V tomto fóre nie sú ďalšie neprečítané témy.

prednost jedneho elementu pri prekryvani

v HTML, XHTML, XML, CSS

2

207

02.04.2010 17:22

davider137

V tomto fóre nie sú ďalšie neprečítané témy.

zistit class elementu - ako upravit fciu?

v JavaScript, VBScript, Ajax

13

567

02.02.2011 13:47

DeeJay3

V tomto fóre nie sú ďalšie neprečítané témy.

Ako automaticky presúvať políčka elementu <select> podľa obľúbenosti

v HTML, XHTML, XML, CSS

1

208

12.11.2016 9:58

BX

V tomto fóre nie sú ďalšie neprečítané témy.

div

v HTML, XHTML, XML, CSS

4

671

01.08.2008 15:12

m4r14n

V tomto fóre nie sú ďalšie neprečítané témy.

Ukonceny div

v HTML, XHTML, XML, CSS

7

431

02.09.2010 13:35

emer

V tomto fóre nie sú ďalšie neprečítané témy.

div/pozadie

v HTML, XHTML, XML, CSS

3

747

03.01.2007 16:41

majso



© 2005 - 2019 PCforum, edited by JanoF