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