Saturday, 18 January 2020

Last column jumping to the next row in ion-grid Ionic 4

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

Ios vs Android view

<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:

enter image description here



from Last column jumping to the next row in ion-grid Ionic 4

No comments:

Post a Comment