I am trying to create a footer with 5 buttons/icons. Actually I am trying to replicate a tab, but without using that function. There is enough space to fit the 5 icons with teir label, however, for some reason in Android the last icon is jumping to the next row. I have been trying to play with the width and sizes but I could not obtain the desired result.
Any suggestion?
Long story short: I want that in Android the footer will be displayed as in Ios
Thanks
<ion-footer>
<ion-toolbar color="light">
<ion-grid>
<ion-row>
<ion-col>
<ion-tab-button >
<ion-icon src="/assets/couple_on.svg"></ion-icon>
<ion-label>Info</ion-label>
</ion-tab-button>
</ion-col>
<ion-col>
<ion-tab-button >
<ion-icon src="/assets/rings_off.svg"></ion-icon>
<ion-label>Donde</ion-label>
</ion-tab-button>
</ion-col>
<ion-col>
<ion-tab-button >
<ion-icon src="/assets/church_off.svg"></ion-icon>
<ion-label>Inicio</ion-label>
</ion-tab-button>
</ion-col>
<ion-col>
<ion-tab-button >
<ion-icon src="/assets/cake_off.svg"></ion-icon>
<ion-label>Programa</ion-label>
</ion-tab-button>
</ion-col>
<ion-col>
<ion-tab-button >
<ion-icon src="/assets/camera_off.svg"></ion-icon>
<ion-label>Fotos</ion-label>
</ion-tab-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
Edit: When I translated to russian (longer words), and using the nowrap, the last icon was going away from the screen. I tried to reduce the size of the label, but still is not centered. Its annoying because I now it fits, as its seen in Ios:
from Last column jumping to the next row in ion-grid Ionic 4
No comments:
Post a Comment