React ListItem styling issues
-
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
-
@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
andnodivider
). 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 theListItem
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 usejustifyContent: '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
-