React ListItem styling issues
Serge van den Oever last edited by
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 last edited by
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 :P