0

Latest Update:

I have found the issue. You can see that it has 90px padding-right on title-ios. Do you know why?

enter image description here

Original Quetion:

Android UI - header is Correct

enter image description here

iPhone X ios 11.1 UI - Header is Wrong

enter image description here

html

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle icon-only outline color="light" class="border-none">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <ion-grid no-padding>
        <ion-row>
          <ion-col col-6>
            <span class="font-size-18 font-family-trench" *ngIf="data==null">BUDGET MY RENO</span>
            <span class="font-size-18" *ngIf="data!=null">{{data.project}}</span>
          </ion-col>
          <ion-col col-6>
            <ion-icon name="ios-add-outline" float-right tappable class="font-size-30" (click)="goToNewProject()" *ngIf="data==null"></ion-icon>
            <ion-icon name="ios-create-outline" float-right tappable class="font-size-30 margin-top-minus-4" (click)="goToNewProject()"
              *ngIf="data!=null"></ion-icon>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-title>
  </ion-navbar>
</ion-header>

Question: As you can see I have constructed the right item (+) inside the ionic grid. Can you tell me why this much of right padding/margin on an iOS device? How can I sort out this issue?

Runtime style code on iPhone x iOS 11.1:

enter image description here

Note: Actually this is not only a issue on iPhone x, 11.1 but also same for the iPhone-6s-Plus, 9.0. That means issue on my HTML code.Maybe grid which I have used.Any clue?

Update:

Even though it shows grid width as 100%, on computed section it shows as 195px. On Android, it shows as 324px. Do you know why?

enter image description here

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • what is the width of `ion-title` in ios iphoneX? – Suraj Rao Nov 28 '17 at 04:23
  • you probably need to use `ion-buttons` with `end` attribute on the `+` button – Suraj Rao Nov 28 '17 at 04:24
  • I don't think where it'll work. Because I have a problem with parent element i.e. `title-ios`. The `+` icon is a way, inner child of it. `title-ios` has `90px` `padding-right`. I don't know how it came there? @SurajRao – Sampath Nov 28 '17 at 04:48
  • I was talking about putting it after ion-title.. – Suraj Rao Nov 28 '17 at 05:05
  • Yes, If we put something after the `ion-title` then that too inherited that alien `90px` padding no.If you see my latest update image then you'll see that. @SurajRao – Sampath Nov 28 '17 at 05:37

0 Answers0