#概要
DjangoでWebアプリケーションを作成中、フロントのCSSはBootstrapを使ってデザインしていた。
viewから渡されたリストをループで処理しながらアコーディオンを作成しようとしたら、
リストが1件の時の表示がおかしくなってしまった。
ソース:
test.html
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
{% for l in list %}
<div class="card">
<div class="card-header" role="tab" id="heading{{ forloop.counter }}">
<h5 class="mb-0">
<a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapse{{ forloop.counter }}" role="button" aria-expanded="true" aria-controls="collapse{{ forloop.counter }}">
{{ forloop.counter }}
</a>
</h5>
</div>
<div id="collapse{{ forloop.counter }}" class="collapse" role="tabpanel" aria-labelledby="heading{{ forloop.counter }}" data-parent="#accordion">
<div class="card-body">
{{ l }}
</div>
</div>
</div>
{% endfor %}
</div>
#今のところの対処法
リストが1件しかない場合の分岐処理を追加し、CSSのクラスを追加してあげる。
card
<div class="card">
↑に
card-border-rounded
<div class="card {% if list|length == 1 %}border rounded{% endif %}">
↑という分岐を追加してあげると1件でも綺麗に表示してくれる。
#おわりに
これ解決するのに1〜2時間かけた気がする...
Djangoじゃなくてもリストのサイズがわかれば他の言語/フレームワークでもできると思うし、なんならもっといい方法がある気がする。
誰かBootstrap/CSSに詳しい人いたらもっとスマートな方法教えてください...(涙目)
ちなみにBootstrap公式ドキュメントにあるソースのアイテム2と3を全部消してアイテム1だけ残しても同じ現象が起きるから、アコーディオンが1個だけなんて使い方は想定してないんじゃないかなぁ...と勝手に思ったり。