when ons-if and ons-list-item are use together,border is not show.
-
when ons-if and ons-list-item are use together,border is not show.
Onsenui version : 2.5.3,
OS : android6+
Code:<ons-list> <ons-if platform="android"> <ons-list-item modifier="longdivider" tappable> <div class="left"> <ons-icon icon="fa-cloud-download" size="20px" style="color:rgb(54, 162, 235)"></ons-icon> </div> <div class="center">item1</div> </ons-list-item> </ons-if> <ons-list-item modifier="longdivider" tappable> <div class="left"> <ons-icon icon="fa-info-circle" size="20px" style="color:rgb(54, 162, 235)"></ons-icon> </div> <div class="center">item2</div> </ons-list-item> </ons-list>
-
@czpae86
ons-if
will only work for content insideons-list-item
, not for wrapping it. The reason is that it alters CSS selectors like.list-item:first-of-type
. If you want to include a specific item only on android, you can use theinit
event of that page and add the item with JavaScript instead ifons.platform.isAndroid()
is true.
-
@Fran-Diox Thank you,The problem is solved.:+1:
if(ons.platform.isAndroid()){ var html = '<ons-list-item modifier="longdivider" tappable>' +'<div class="left">' +'<ons-icon icon="fa-cloud-download" size="20px" style="color:rgb(54, 162, 235)"></ons-icon>' +'</div>' +'<div class="center">item1</div>' +'</ons-list-item>'; document.querySelector('#list').appendChild(ons._util.createElement(html)); }