Brak dolnego obramowania po rozwinięciu accordiona Bootstrap 4

pytanie zadane 16 września 2018 w HTML i CSS przez kevin Mądrala (5,010 p.)

Witam!

Jaka może być przyczyna tego że po rozwinięciu accordiona nie mam dolnego obramowania ? https://jsfiddle.net/adriansikora344/ykuh3qco/4/

To jest standardowy "error" i powinienem dodać to w css'sie ? Czy nie dodałem jakiegoś znacznika ?

1 odpowiedź

odpowiedź 17 września 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)
edycja 17 września 2018 przez Kamil Łydka

Raczej Ci niepotrzebny ten wewnętrzny div z klasą card. Bo niby po co? Karta to cały ten twój element, a nie wewnętrzna część accordian. Coś takiego powinno załatwić sprawę:

<div class="accordion card" id="accordion-filter">
    <div class="card-header" data-toggle="collapse" id="heading-filter">

...

Ładniejsze i szybsze rozwiązanie niżej w komentarzu.

1	komentarz 17 września 2018 przez arces Pasjonat (17,700 p.) Kolega ma najprawdopodobniej kod prosto z dokumentacji, dlatego też zastosował taką strukturę HTML ;)

komentarz 17 września 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Możliwe, ale mi to bardziej wygląda na pomieszanie trochę dokumentacji, a trochę inwencji twórczej.

Tak naprawdę można zrobić tak jak po części zaproponował użytkownik i jak radzi sama dokumentacja:

<div class="p-5">

<div id="accordion">
    <div class="card" id="accordion-filter">
        <div class="card-header">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-filter" aria-expanded="true" aria-controls="collapse-filter">
          Filtry
        </button>

        </div>

        <div id="collapse-filter" class="collapse" aria-labelledby="heading-filter" data-parent="#accordion">
            <div class="card-body">
                <p>Zawartosc</p>
            </div>
        </div>
    </div>
</div>

</div>

Tutaj mamy:

https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

No i jak teraz patrzę, to wystarczy że @kevin usunie tą klasę: "accordion" z najwyższego diva, która wszystko psuje i będzie w porządku.

komentarz 17 września 2018 przez kevin Mądrala (5,010 p.)

@arces, Dokładnie tak :)

komentarz 17 września 2018 przez kevin Mądrala (5,010 p.)

@Kamil Łydka, ja to zastosowałem ponieważ chciałem aby accordion rozwijał mi się jak kliknę w całą belkę a nie tylko w tytuł/napis.

1	komentarz 17 września 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.) No i jak usuniesz klasę .accordion, to będzie działało dla całej belki.

komentarz 17 września 2018 przez kevin Mądrala (5,010 p.)

Działa :) Dziękuje. Ale co w przypadku gdy chcę mieć strzałki w labelu ? Tzn gdy accordion jest rozwinięty to chcę mieć strzałkę w górę a gdy jest do rozwinięcia to chcę mieć strzałkę w dół ? To też robiłem nadając to w tej klasie w pliku css

1	komentarz 17 września 2018 przez arces Pasjonat (17,700 p.) Jak accordion jest rozwinięty to w buttonie nie ma klasy "collapsed". Na tej podstawie możesz pokombinować z pseudoelementem :after i nadać odpowiednią strzałkę.

2	komentarz 17 września 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.) @kevin, No to masz sporo tego w internecie, wystarczy że wpiszesz arrow collapse bootstrap. Jest sporo rozwiązań i wyników, te bez JS opierają się na tym co napisał @arces, więc sobie łatwo znajdziesz.