Diskusia – 15. diel - Bootstrap - Collapse a Accordion

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

MilanS

Člen

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.

Odpovedať

1.2.2018 7:33

T-fon

Člen

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

Odpovedať

23.2.2018 10:46

Petr Čech

Tvůrce

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

Odpovedať

23.2.2018 10:57

the cake is a lie

Jan Jurníček

Člen

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?

Odpovedať

11.3.2019 18:26

Jan Jurníček

Člen

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.

Odpovedať

11.3.2019 19:25

Jan Jurníček

Člen

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.

Odpovedať

12.3.2019 11:21

berry309

Tvůrce

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

Odpovedať

4.12.2022 14:07

Karel Jandera

Člen

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

Odpovedať

10.9.2023 17:45

Karel Zaoral

Člen IT Redactor Gang

Karel Zaoral:2. februára 14:07

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

Odpovedať

2. februára 14:07

Edita Karlovská

Člen

Edita Karlovská:8. februára 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?

Odpovedať

8. februára 8:29

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – 15. diel - Bootstrap - Collapse a Accordion