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