ons-list-item hides class



  • Assume CSS contains:
    .my-class { background-color: pink; }

    If I’m using ul/li with Angular 4, the following code gives each list item a pink background

    <ul>
      <li class="my-class" *ngFor="let item of items">
        {{item}}
      </li>
    </ul>
    

    I had hoped and expected ons-list /ons-list-item to behave the same way, so the code below would give each list item a pink background.

    <ons-list>
      <ons-list-item class="my-class" *ngFor="let item of items">
        {{item}}
      </ons-list-item>
    </ons-list>
    

    It doesn’t, but the following code does

    <ons-list>
      <ons-list-item *ngFor="let item of items">
        <div class="my-class">
          {{item}}
        </div>
      </ons-list-item>
    </ons-list>
    

    The problem is that the generated code for each {{item}} is wrapped in

    <div class="center list-item__center">
    </div>
    

    The result is that the {{item}} is set to a style over which I have no control in the <ons-list-item>

    I’m using ngx-onsenui 4.0.0-rc.1 and have tried onsenui 2.3.3 and onsenui 2.5.3 with the same results. (I patched the package.json of ngx-onsenui to use the later version.) Obviously, the code above is a fragment of my actual code.

    Ideally, the ons- components would behave like the standard ones on which they are based. I appreciate that frameworking “magic” can make this difficult, but it took hours to figure out what was happening and to work around it!


  • Onsen UI

    @vgriffin That “magic” is actually described in the guide. It is necessary in order to provide borders, spacing and an easy API.

    To be honest, I’m not sure about ngx-onsenui but in vanilla or other bindings, applying a background-color to the main ons-list-item works well since the sub items don’t alter the color.



  • @Fran-Diox
    It explicitly doesn’t work on the current version of the wrapper for Angular 2+. It may be an issue related to processing *ngFor. I found the problem when I tried to affect the background-color by attaching the class to the ons-list-item and having my display come out in white-on-white…

    This version is 4.0.0.rc1, so they should be able to deal with it!


Log in to reply