Cant center ons-list-item text in Android
-
Hi, I’m having a problem centering text inside an ons-list-item in Android. I’m trying to do this with the <div class=“center”>, but it just wont work. I was able to center it using ons-column, but this dissables the tappable effect I wanted to assing to the ons-list-item. As far as i’ve seen, this also affects the web view, and I’m seeing this bug even in Onsen’s sample page:
https://onsen.io/v2/api/js/ons-list-item.html#modifiers
(The lists title shows perfectly under ios, but left-aligned on android’s view).I saw this thread
https://community.onsen.io/topic/1115/centre-title-in-android/2
where Fran Diox recommends assigning the css manually with text-align: center, but this isn’t working for me either. Is there any solution to center the text in Android, or assign the tappable effect to an ons-column?Thanks!
-
@rogerroger Check this out and let me know if it doesn’t work:
-
Thanks for the suggestion. I tried it and it doesn’t work. Apparently, being inside an <ons-list-item tappable> tag breaks the alignment. I tried to add it in the codepen and it also missalings the text.
-
@rogerroger Fixed it. I didn’t realize you needed it in the list.
-
Thank you for your help @munsterlander, the “width: 100%” trick solved the issue!
