Onsen UIを利用したアプリでデータなどの一覧を表示する場合、ons-listons-list-itemを使用します。
しかし、ons-list-itemの余白により、表示できる行数が限られたり、表示バランスがイメージどおりにならない問題が発生します。
今回は、ons-list-itemの余白を調整する方法を紹介します。

以下のコードをAndroid版のMonacaデバッガーで表示します。

以下のように表示されます。

Onsen UIは、以下のようなHTMLを生成します。

ons-list-itemの余白は、Onsen UIのCSSを解析すると、以下のクラスが影響していることがわかります。
影響箇所のみ集約。

list-item (list-item–material)

list-item__center (list-item–material__center)

Android版の場合、list-item–materialとlist-item–material__center、Android・iOS版共通の場合、list-itemとlist-item__centerのpaddingmin-heightを変更することで余白を調整することができます。
Androidの場合、以下のようになります。

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

新品価格
¥2,948から
(2020/2/11 18:00時点)

【Monaca】Onsen UI ons-list-itemの余白を調整する
Tagged on: