Accordion Text - dopasowanie wysokości
Author: Jacek A.
Visited 1426,
Followers 1,
Shared 0
W elemencie Accordion text nie widzę możliwości dopasowania wysokości każdego z boxów do jego zawartości.
Domyślnie każdy box ma taką samą wysokość, niezależnie od tego czy jest w nim jedno zdanie, czy referat.
Proszę o pomoc w automatycznym dopasowaniu wysokości do zawartości.
Znalazłem wątek z podaną propozycją rozwiązania, ale u mnie nie działa:
https://helpcenter.websitex5.com/en/post/200325
Posted on the
Witaj Jacek,
Rozwiązanie, do którego podałeś link nie jest uniwersalne - kod będzie działać tylko na stronie, dla której został przygotowany. Proszę wyeksportować stronę na serwer i podać jej adres.
Pozdrawiamy
Author
Chodzi o elementy "O mediacji O Mediatorze O mnie" na poniższej stronie:
https://www.mugen.com.pl/AS/index.html
Z tym, że adres jest tymczasowy, sama struktura strony również.
Proszę o informację, jakie przeróbki na stronie mogą spowodować, że otrzymany kod przestanie działać.
Na czym opiera się jego działanie?
Witaj Jacek,
Proszę spróbować dodać w nagłówku strony kod CSS:
<style>.accordion_el .accordion_desc { height: auto !important; }</style>
Kod nadpisuje domyślną wysokość elementu zawierającego tekst (wymusza ustawienie wysokości na automatyczną).
Pozdrawiamy
Author
Dziękuję, niestety kod nie działa.
Wpisałem go w ustawieniach zaawansowanych strony (menu: 3. Mapa), przed tagiem otwierającym sekcję HTML.
Czy to nieodpowiednie miejsce?
Zakłądając, że kod zadziała, raz jeszcze proszę o informację, jakie przeróbki na stronie mogą spowodować, że przestanie działać.
Witaj Jacek,
Kod powinien zostać umieszczony wewnątrz nagłówka (sekcja HEAD). Gorąco zachęcamy do zapoznania się z podstawami HTML i CSS jeżeli zamierzasz wprowadzać takie zmiany na stronie.
Teoretycznie każda zmiana dot. ułożenia, liczby i typów obiektów na stronie może spowodować, że niestandardowy kod CSS nie będzie działać. Proszę mieć na uwadze, że taki kod zmienia sposób wyświetlania konkretnego elementu na stronie i nie zawsze jest możliwość odwołania się jednoznacznie do wybranego obiektu. Również w ramach aktualizacji programu lub dodatkowych obiektów mogą zajść zmiany w generowanym kodzie HTML/CSS, które spowodują że Twój niestandardowy kod przestanie działać.
Pozdrawiamy
Author
Rozwiązanie nie działa.
Proszę sprawdzić uaktualnioną stronę. Element Accordion text zachowuje się tak samo jak poprzednio.
Identyczny efekt jest po umieszczeniu kodu przed tagiem zamykającym sekcję HEAD (obecnie znajduje się po tagu otwierającym HEAD).
W związku z powyższym proszę o dalsze wskazówki.
Witam,
Podany kod css oczywiście działa. Trochę tylko dziwnie się karty otwierająale działa.
http://www.spacesoundrecords.com/spaceholidays10.html
Author
OK, teraz działą, ale to jak boxy się rozwijają woła o pomstę do nieba!
Proszę tylko spojrzeć...
https://www.mugen.com.pl/AS/index.html
:(
Jak mogę zachować płynność ruchu oryginału przy dopasowaniu wysokości do zawartości?
Proszę spróbować skrócić czas animacji np. do 50 ms. Pomaga.
Skrócenie czasu animacji faktycznie daje lepszy efekt wizualny :)
Na stronie
http://bp57.cba.pl/strona-12.php
jest ciekawy accordion
Author
Bogdan P., dziękuję za link :)
Dokładnie o taki efekt chodzi.
Sugestie ze skróceniem czasu animacji nie dają estetycznego rozwiązania.
Widzę, że w podanej stronie na początku head jest:
<style> .accordion_desc { height: auto !important; } </style>
U mnie jednak nie rozwiązuje to problemu :(
Jacek A.
Jeżeli podaba Ci się accordion podany w linku powyżej to podaj mi swój adres email prześlę w formie pdf kod do tego obiektu gotowy do wstawienia oraz instrukcję jak to zrobić. Wszystko będzie w formie kopiuj - wklej. Na pewno poradzisz sobie.
Inaczej na stronie http://bp57.cba.pl/strona-12.php masz wstawione rozwiązanie Twojego problemu.
Author
@Bogdan P. - ***
dziękuję!
Witam !
A tutaj przykład znalezionego w sieci accordion text, styl można sobie dowolnie modyfikować :)
http://www.spacesoundrecords.com/spaceholidays10.html
Koledzy,
Stworzyłem własną stronę „Frequently Asked Questions”, która może was zainteresować. Jest usworzona na tej samej zasadzie co „accordion menu”. Opiera się głownie na kilku funkcjach JavaScript, które do moich potrzeb sam napisałem.
Chodziło mi głównie o to, aby nie trzeba było zmieniać kodu HTML strony, gdy tekstowa informacja wyświetlana się zmienia. Tekst jest w pliku, który może być zmieniany bez interwencji w kod strony.
Zajrzyjcie na tę stronę . Pytanie „otwiera się” na odpowiedź, na minimalną wysokość jaka jest niezbędna.
Tekst tam zawarty jest kopią szeregu pytań/odpowiedzi z wielu różnych stron. Proszę kliknąć na pytanie numer 52 (jedna linika tekstu) in na numer 56 (zawiera wiele linii).
Utworzyłem też „button” Expand/Collapse All Answers, otwierający i zamykający wszystkie pytania.
Jest to przykład pytań i odpowiedzi, który może być też użyty jako jednopoziomowe menu typu accordion.