iOS device float-right issue with header item


#1

I have a problem with an iOS device with a header. When I used below HTML it works perfectly fine on Android device.

stackblitz

Editor: https://stackblitz.com/edit/ionic-cvxdi8?file=pages%2Fhome%2Fhome.html

App: https://ionic-cvxdi8.stackblitz.io

.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      <span>Budget</span>
      <ion-icon name="ios-add-outline" float-right></ion-icon>
    </ion-title>
  </ion-navbar>
</ion-header>

Android UI: No issues.

and

But on an iOS device, it is not working. Header’s center alignment is fine. But the problem is with the + sign. I need to show it like an android device. In other words float-right. Can you tell me how to achieve that?

iOS device:

ios


#2

HI,

Actually there is an issue with your code u have put in thats why it is showing in wrong place used this code .

Budget

and let me know if u facing the same issue.

thanks


#3

Sorry, I can’t see any code you provided?


#4

let me know if u facing the issue again.

thanks.


#6

Actually it as an issue where I cannot click the +. Can you tell me why?

Demo: https://stackblitz.com/edit/ionic-dgzti3?file=pages%2Fhome%2Fhome.html


#7

I have foind the solution here: https://stackoverflow.com/questions/47805790/ios-device-float-right-issue-with-header-item


#8

Hi,

Sorry for late response as I am little bit busy .

Use this css Because ion-title by-default take 100% width thats why u not abel to click .

ion-title {
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 100%;
text-align: center;
}