Change the size of header - IONIC 2

user_7384064 0
Viewed 15515

I need to resize the header, how can I do it? I tried with a few css styles but it did not work.

I want to achieve the small one

I want to achieve the small one

Thanks!

edit: This is my code, hope this help...

thanks again and let me know if you need more details

............................................................................................................

page-home {

ion-navbar{
    width: 100%;
}
    
ion-title img{
    padding-left: 10px;
}

img.logo{
    padding-left: 110px;
    height: 20px;
}


p.title{
    font-size: 15px!important;
    padding-top: 10px;
    padding-left: 110px;
}

ion-content{
    margin-left: 100px;;
    margin-top: 40px;
}

ion-grid{
    text-align: center;
}

ion-row.header-row{
    text-align: center;
    font-weight: bold;

}

ion-col.header-col{
    background-color: #eee;
    border:1px solid #ddd!important;
}

ion-col.info-col{
    background-color: #fff;
    border:1px solid #ddd!important;

}

ion-col.col-align{
    padding-top: 14px;
}

.button{
    width: 90px;
}

}
<ion-header>
  <ion-navbar>
    <ion-title>
      <img alt="logo" class="logo" height="20" src="../assets/img/image.png">
    </ion-title>
  </ion-navbar>
  <ion-toolbar class="toolbar-header" color="dark">
    <ion-title>
          <p  class="title" text-wrap>Events</p>
    </ion-title>
  </ion-toolbar>
</ion-header>

<!--End Header-->

    <ion-content padding>
      <ion-grid>
        <ion-row class="header-row">
          <ion-col class="header-col" col-1>
            EVENTS
          </ion-col>
          <ion-col class="header-col" col-2>
            ORIGIN
        </ion-col>
          <ion-col class="header-col" col-2>
            DESTINATION
        </ion-col>
          <ion-col class="header-col" col-1>
            ERROR
          </ion-col>
          <ion-col class="header-col" col-2>
            FIRST EVENT
          </ion-col>
          <ion-col class="header-col" col-2>
            LATEST EVENT
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>

ionic2 ionic-framework css styles
4 Answers

in ionic 4 use this

ion-toolbar, ion-header {
 --min-height: 48px;
}
user_65992280

In my case the above answer did not work, I could not remove the dead space above/below the title in the ion-header however the following did the trick perhaps it will help someone visiting here.

ion-navbar.toolbar {
    min-height: 30px;
}
user_10802660

To change it on all pages you need to use the sass variables that ionic documentation provides:

I use to do it exactly as it shows on the reference link above. These are the sass variables:

    //toolbar settings
$toolbar-ios-title-font-size: 1.3rem;
$toolbar-md-title-font-size: 1.4rem;
$toolbar-wp-title-font-size: 1.1rem;
$toolbar-md-height: 1.3rem;
  • where "md" stands for material design
  • "ios" is explicit. "wp" goes
  • for Windows Phone.
user_84696440
Related