IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 15 - Bootstrap - Collapse a Accordion

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
MilanS
Člen
Avatar
MilanS:1.2.2018 7:33

Ahoj, jak lze docílit toho, aby v accorodionu obsah na rozbalené kartě zabíral jen např. 5 řádků a pak roloval. U prostého textu to jde (asi to je čuňárna) vložit text do text arrea s raw="5". Bohužel takto tam ale nelze vložit formátovaný obsah (seznamy, tabulky, obrázky...) Díky moc.

 
Odpovědět
1.2.2018 7:33
Avatar
T-fon
Člen
Avatar
Odpovídá na MilanS
T-fon:23.2.2018 10:46

Ahoj, nevím jestli je to nejlepší řešení, ale já to dělal tak, že jsem zadal divu s textem pevnou výšku, kterou jsem si spočítal 5(řádků) x line-height (+případný padding).

 
Odpovědět
23.2.2018 10:46
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na MilanS
Petr Čech:23.2.2018 10:57

Nic lepšího než pevnou výšku asi nevymyslíš, ale i to se dá udělat kultivovaně - můžeš třeba udělat něco jako

calc(5em + padding, margin...)

No, a potom jednoduše overflow-y: auto

Odpovědět
23.2.2018 10:57
the cake is a lie
Avatar
Jan Jurníček:11.3.2019 18:26

Ahoj, mám problémy s dynamicky naplňovaným collapse panelem. V ASP.NET web forms jsem vytvořil generický handler ashx, v response který vrací text/html. Obsah jsem umístil do jmenného kontejneru, takže jsou dynamicky přidělována klientská id.

Tohle všechno mi krásně funguje, ale co nefunguje, je toto: Součástí toho html obsahu je taky collapse. Tedy struktura, jako v ukázce Collapse. Zkontroloval jsem třídy a hlavně reference, tedy - že href odkazuje na link. Vše souhlasí, ale nefunguje.

Hledal jsem na Internetu, píše se tam něco o bindingu položek, který vyžaduje jQuery, našel jsem tohle:

https://stackoverflow.com/…-click-event

Ale nic nepomohlo.

Opatřím-li ovládací prvek (link) , který má přepínat collapse, atributem onclick následovně:

onclick="$(this­.getAttribute('href'))­.addClass('show');"

Tak to funguje na rychlý dvojklik, přičemž po prvním kliku dostane collapse navíc třídu collapsing. Pokud druhý klik stihnu, dokud má collapse třídu collapsing, vnutím mu třídu show. Jinak ne.

Má někdo myšlenku, co s tím?

 
Odpovědět
11.3.2019 18:26
Avatar
Jan Jurníček:11.3.2019 19:25

Napadlo mě, co asi dělám špatně: Ten binding musím provést na stránce, kam dynamicky vytvořený HTML kód umístím po jeho umístění na tuto stránku. Všechny pokusy jsem dělal uvnitř ashx handleru na stránce, která měla sloužit pouze k vytvoření html kódu (jeho realizaci do řetězce, který se zapíše response.

Je zajímavé, že když jsem collapse panel na začátku opatřil třídou show, tedy class="collapse show", tak sbalování i rozbalování fungovalo. Co nefungovalo, bylo přepínání arial-expanded true/false linku a taky je problém v tom, že na začátku chci mít ty collapse panely sbalené.

Zítra s tím budu dělat pokusy tak, že spustím javascript (pro binding) na klientovi ashx handleru po natažení, ne uvnitř ashx handleru na stránce, kterou vyhazuji a mám ji jen kvůli tomu, aby proběhl životní cyklus stránky a naplnila se data, která ve formátu html odešlu klientovi.

 
Odpovědět
11.3.2019 19:25
Avatar
Odpovídá na Jan Jurníček
Jan Jurníček:12.3.2019 11:21

Ahoj, tak už jsem přišel na to, v čem byl problém: Šlo totiž o to, že ten dynamicky naplňovaný HTML obsah byl plněn z dceřinné tabulky. A šlo mi o to, aby se plnil a zobrazoval až na vyžádání uživatele. Čili na stránce je collapse rozbalované tlačítkem a jeho obsahem je seznam dceřinných záznamů. Dceřinné záznamy se natáhnou dynamicky technikou AJAX (voláním, jQury.ajax(), případně jQuery.load()) z ashx handleru až v okamžiku, kdy je chce uživatel zobrazit, čili když chce rozbalit collapse.

No, a problém tedy byl v tom, že jsem to natažení napsal jako ošetření události "show.bs.collapse". Ošetření události nebylo dokončeno a uvnitř byly realizovány další collapse panely. Což vedlo k rekurzivnímu volání toho natažení.

Když jsem to natažení přepsal jako ošetření události click tlačítka, které rozbaluje to collapse, tak vče funguje a nemusím ani nic explicitně vázat. Po click testuju, jestli má collapse třídu show a když ne (je sbaleno), tak natáhnu data. Teprve pak se rozbalí. Kdzž collapse má třídu show, tak nedělám nic, protože se collapse sbalí a nic nebude vidět.

 
Odpovědět
12.3.2019 11:21
Avatar
berry309
Tvůrce
Avatar
berry309:4.12.2022 14:07

Ahoj, pokud mám vedle sebe řekněme tři buttony na každý obsah jeden. V základu nechci zobrazit ani jeden obsah, až teprve po kliknutí na ten daný button. Prakticky to co je tady v prvním příkladu. Jak docílím toho aby ale po kliknutí na druhý button se nejenom zobrazil druhý obsah, ale zároven i zavřel první? V současnosti jsem ve stavu kdy se mi zobrazí všechny tři obsahy pod sebou pokud znovu nekliknu na ten otevřený. Zkoušel jsem použít věci z accordion, ale nejspíš blbě.

 
Odpovědět
4.12.2022 14:07
Avatar
Karel Jandera:10.9.2023 17:45

Collapse můžeme použít pro libovolné elementy, stačí je správně napojit, viz první příklad.

Zdroj: https://www.itnetwork.cz/…-a-accordion

Jako úplně nevím ale kde je ukázaný v tom příkladu jak to napojit?

Myslím že když by bylo vyloženě napsaný že touhle částí kódu (a uvedený ten kousek kódu z příkladu) se to napojuje na tuhle část kódu (uvedený ten druhý kousek kódu) i třeba pod tím ukázkovým kódem tak by to bylo lepší.

 
Odpovědět
10.9.2023 17:45
Avatar
Karel Zaoral
Tvůrce
Avatar
Karel Zaoral:2. února 14:07

Děkujeme za vaše podněty. Lekci jsme aktualizovali :-)

 
Odpovědět
2. února 14:07
Avatar
Edita Karlovská:8. února 8:29

Ten závěr s JavaScriptem mi není úplně jasný - čeho tím docílím? Vždyť to funguje i bez dodatečně vytvořeného JS kódu?

 
Odpovědět
8. února 8:29
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.