3. React ListItem styling issues

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

React ListItem styling issues

  • S

    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

    0

  • @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

    0