ionic-frameworkionic4ion-grid

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

EDIT 2: In was seeing it in the simulator and with your correctios was ok. However in the phone is still going away from the screen in the russian version, and in the spanish is not centered, there is more space on the left than on the right. (https://i.sstatic.net/Y377b.jpg)enter image description here enter image description here


Solution

  • You could force the row to not to wrap:

    https://ionicframework.com/docs/api/row#row-attributes

    But in this case, you need to handle smaller screen sizes as the columns won't "shrink down" automatically

    <ion-footer>
     <ion-toolbar color="light">
      <ion-grid>
       <ion-row nowrap>
         ...        
        </ion-row>
       </ion-grid>
      </ion-toolbar>
     </ion-footer>
    

    If you still lack space you can optimize it by:

    a. removing padding (

    b. make svg smaller via size="small"

    c. use Chrome Dev tools, select element and see which css you need to tackle to make it perfectly fit

    enter image description here