[IONIC 4] Can't correctly align ion-img in Android footer

  • First of all, I am using the IONIC 4 framework to build an Android app.
  • All the problems I’m about to explain are happening in the footer of my side menu.
  • I do not have any css applying that could be causing this

I have an ion-footer in which I want to align to the left a clickable ion-img, it should be simple but it really hasn’t been, I have tried anything and everything, from putting the ion-img inside all possible other containers & components and then trying to force those components to the left, aswell as using the ion img right away in the ion-footer and trying to force it to the left, no matter what I do and what parameters I set, the image always goes to the center in Android, but funny enough when I randomly decided to test in Edge, it is on the left, what can I do to fix it on Android? Because the app is for Android lol it really doesn’t matter if its correct in Edge.
Ive tried setting all components to left, aswell as to start, tried setting the slot to start and left too, I really don’t know, I’ve tried anything I could think of.

Footer

The visual I want

The visual I get ( in android )

At first I thought my issue was related to https://github.com/ionic-team/ionic/issues/15522 but then I conclued it wasn’t since their fix didn’t work for me.

Quick, untested suggestion:

<ion-footer>
  <ion-toolbar> <!--NEW-->
   <ion-buttons>
      <ion-button> 
          <img>  <!--Think ion-img is the wrong component -->
      </ion-button>
   </ion-buttons>
  </ion-toolbar>
</ion-footer>

Personally, I would convert the logo to an SVG so it will render nicer. Then it can be referenced by the ion-icon component.

1 Like

Yep I’ve tried the toolbar too, and just did again, didn’t work.
I will convert the logo to an SVG and try that, since I have aligned many ion-icon the way I wanted to, the problem is using ion-img
I will still give feedback once I test it but if I can use ion-icon to put the logo there then I’m sure it will most likely work, thank you

Transformed it into a svg and used ion-icon and now I can align it the way I want, unlike when I was using ion-img, it also loads faster now! Thank you.