3. ons-list-item hides class

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-list-item hides class

  • V

    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!

    0 1 Reply
  • 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.

    0
    V
     1 Reply
  • V

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

    0