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
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
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
.centerinner element of the list-item - set it to the
ListItemtag 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
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