I would like to have an ion-item inside a list with a word centered between two icons (one on left side and one on right side) like this:
I’m not able to achieve this goal, because I have something like that:
This is my code:
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-icon item-left name="lock"></ion-icon>
<b>Woman</b>
<ion-icon item-right name="lock"></ion-icon>
</ion-item>
</ion-list>
How can I have something like in the first image?
you can use ion-grid for this. something like this.
<ion-list>
<ion-item class="item item-icon-left item-icon-right" style="text-align: center">
<ion-grid>
<ion-col col-3>
<ion-icon item-left name="lock"></ion-icon>
</ion-col>
<ion-col col-3>
<b>Woman</b></ion-col>
<ion-col col-3>
<ion-icon item-right name="lock"></ion-icon></ion-col>
</ion-item>
</ion-list>```
thank you for you answer. Unfortunately grid or rows don’t work, same or worst result than mine.
Try this
<ion-list>
<ion-item>
<ion-row>
<ion-col col-1 style="text-align: left;">
<ion-icon name="lock"></ion-icon>
</ion-col>
<ion-col col-10 style="text-align: center;">
<b>Woman</b>
</ion-col>
<ion-col col-1 style="text-align: right;">
<ion-icon name="lock"></ion-icon>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
2 Likes
If you don’t get any better answers, doing this with flexbox is pretty straightforward:
<ion-list>
<ion-item>
<div item-content style="display: flex; justify-content: space-between; width: 100%">
<ion-icon style="flex-grow: 0" name="lock"></ion-icon>
<div style="flex-grow: 1; text-align: center"><b>Woman</b></div>
<ion-icon style="flex-grow: 0" name="lock"></ion-icon>
</div>
</ion-item>
</ion-list>
jaydz
7
I think ion-item has an inherent padding-left: 16px.
Maybe setting that particular item’s padding-left to 0 will do it
Thank you! this solved my problem