Ion header with menu and button renders too big

Ionic Framework ionic-v3
1

my ionic 3 header need to show a menu icon a title and a button in the end. however with these 3 things the header renders these in 3 different rows rather in one single row. see the screenshot as an example

the header looks like below

<ion-header>
        <ion-navbar>
 <button  ion-button menuToggle icon-only >
            <ion-icon name='menu'></ion-icon>
      </button>
      <ion-title>vik</ion-title>
      <ion-buttons end>
          <button ion-button ><ion-icon name="cart"></ion-icon>
              <ion-badge>0</ion-badge>
          </button>
      </ion-buttons>
</ion-navbar></ion-header>
2

I copied your code into a new project and it works fine. Did you some css changes that break your view?

Here you can see your code in action in a new project:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <button ion-button menuToggle icon-only >
          <ion-icon name='menu'></ion-icon>
        </button>
        <ion-title>vik</ion-title>
        <ion-buttons end>
          <button ion-button><ion-icon name="cart"></ion-icon>
            <ion-badge>0</ion-badge>
          </button>
        </ion-buttons>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      Hello World
    </ion-content>
  `
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }
}
1 Like