Monaca Onsen UI Discord Chat Github Repo

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.

    1. 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.

    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.

    3. 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