Onsen UIはすばらしいフレームワークだが、MonacaのAndroid用アプリで使用すると難点もある。
例えば、ons-list
iPhoneの設定画面のようなイメージの画面が再現できる。
2016-06-06-18-27-47

しかし、使い方によっては問題が発生する。
例えば、左はons-listを5回使用した場合、右はons-list-itemを5回使用した場合。
ご覧のとおり、同じ並びを期待するもズレが発生してしまう。
2016-06-06-18-28-03

ons-listons-list-itemのクラスでborder-topborder-bottomを指定しているため、ons-listごとに上線や下線が引かれズレが発生してしまう。
そこで次のCSSを追加し、ons-list-itemの下線のみ有効にする。
※わかりやすくするため、色を変更済み。
2016-06-06-22-25-18

【Monaca】Onsen UI ons-list のズレをなくす
Tagged on: