Ion-title padding is different in emulator or real device from web

Ionic Framework ionic-v3
1 
   <ion-navbar slatepro base>
        <ion-buttons start>
            <button (click)="dismiss()">
                <span primary showWhen="ios">Cancel</span>
                <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
    <ion-title>{{title}}</ion-title>

My title is higher than the rest of the buttons on an emulated or real iOS device than in Browser. I shouldn’t have any CSS setting ion-title or .titlebar, I searched globally. Any suggestions?

2

I’m not positive that this will fix your issue, but your ion-title should be inside of your ion-navbar, i.e.:

   <ion-navbar slatepro base>
        <ion-buttons start>
            <button (click)="dismiss()">
                <span primary showWhen="ios">Cancel</span>
                <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
            </button>
        </ion-buttons>

        <ion-title>{{title}}</ion-title>
    </ion-navbar>
2 Likes
3

That’s the solution I found out a few hours ago as well! Now I am only 3px of target, not 10px. So the perfect solution is definitely in this area Thanks!.