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>
    

    screenshot


  • Onsen UI

    @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.



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

Log in to reply