ヘッダーのサイズを変更する - IONIC 2

Question

ヘッダーのサイズを変更する必要があります。どうすればいいですか？私はいくつかのCSSスタイルを試しましたが、うまくいきませんでした。

私は小さな1つの

感謝を達成したいです！

編集：これは、私のコードでこのヘルプを願っています...再び

おかげで、あなたはより詳細

が必要な場合は私に知らせて.............. .................................................. ............................................

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>

Answer 1

scssの詳細は下記の通りです。もしそうなら、それはdefaultイオンよりも先にstylesの優先権を得るでしょう。

.scss

.md, 
.ios, 
.wp { 
page-home { 
    ion-header { 
     height: 40px;//by default 56px 
    } 
} 
} 

Answer 2

私の場合は上記の答えは動作しませんでした、私はすなわち、高さを縮小することができませんでした。イオンヘッダーのタイトルの上/下のデッドスペースを削除してください。

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