React ListItem styling issues

Serge van den Oever

I have been fighting with ListItem tag in the React bindings of OnsenUI.

If I use the options nodivider, longdivider or material I see no difference (in a chrome browser)
If I set background color, I can’t get the background go all the way to the left, there seems to be a padding of 14 pixels on the left, but I can’t “fix” them.
I want to have the text of some of the ListItems to be centered, but i don’t manage to get this working

Any help would be appreciated

IliaSky

@Serge-van-den-Oever I made a codepen demonstrating all of those features ;)

The modifiers are rotating between the 3, the center style too. The backgrounds begin rotating after 8 items.

modifiers - you should see a difference (at least between the longdivider and nodivider). You may not be able to see it because according to the “specs” the borders should be only half a pixel :D, so maybe you just don’t see them on your screen, but you will on a device or in chrome’s device mode, when DPR >= 2.
You must be setting the background of the .center inner element of the list-item - set it to the ListItem tag and you should be fine.
Some of our components use flexbox - as a react user I think you probably have a general idea about it. Basically textAlign: 'center' does not work always with flexbox - you can use justifyContent: 'center' instead.

You can check out the demo and see all of those features in action :)

Also note that obviously the borders won’t be easy to notice if you’re changing the background of the items :P