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
[html]

テスト


あああ


いいい


ううう


えええ


おおお

あああ
いいい
ううう
えええ
おおお


[/html]

ons-listons-list-itemのクラスでborder-topborder-bottomを指定しているため、ons-listごとに上線や下線が引かれズレが発生してしまう。
そこで次のCSSを追加し、ons-list-itemの下線のみ有効にする。
※わかりやすくするため、色を変更済み。
2016-06-06-22-25-18
[css]
.list {
border-top: none;
border-bottom: none;
}
.list__item {
height: 43px;
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:first-child {
border-top: none;
border-bottom: 1px solid #f00;
}
.list__item:last-child {
border-top: none;
border-bottom: 1px solid #0f0;
}
.list__item:first-child:last-child {
border-top: none;
border-bottom: 1px solid #00f;
}
[/css]

Recommended Posts