when ons-if and ons-list-item are use together,border is not show.

czpae86

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>

screenshot

Fran Diox

@czpae86 ons-if will only work for content inside ons-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 the init event of that page and add the item with JavaScript instead if ons.platform.isAndroid() is true.

czpae86

@Fran-Diox Thank you,The problem is solved.

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));
        }

when ons-if and ons-list-item are use together,border is not show. browsing