md-tab-groupボディの最小高さを角度2で0に変更します。

Question

ここでは、角度2の材料md-tab-groupを使用するa plunker demoです。

基本的には、この

<md-tab-group> 
    <md-tab> 
     <template md-tab-label>Tab</template> 
     <template md-tab-content> 
      <md-content class="md-padding"> 
       <p>200 px height</p> 
      </md-content> 
     </template> 
    </md-tab> 
</md-tab-group> 

は200pxの高さと体を持っているタブにレンダリングします。それはフレックスレイアウトを使用しているので、最小の高さを変更する方法をソースから見つけることはできません。実際には、このスタイルはmd-tab-groupのためにリストされます。

[_nghost-vvf-2] { 
    display: flex; 
    flex-direction: column; 
    font-family: Roboto,"Helvetica Neue",sans-serif; 
    min-height: 248px; 
} 

はどのように最小の高さを適切にmd-tab-groupのために0に復元することができますか？そして、このmin-heightはどこから来たのですか？

---

問題が2.0.0-alpha.5と2.0.0-alpha.5-2に固有のもので、それはmasterに表示されないことが表示されます。あなたが気づいた場合は

Answer 1

1. 、48pxの高さは 'MD-タブのラベル'

   た.md-タブラベル[_ngcontent-RRU-2] { 行の高さのチャイルズのために宣言されています：48px ; 身長：48px;}

2. 残りの高さ（200px）は「md-tab-content」によって取得されます。

3. アプリのCSSファイルで 'md-tab-group'の最小高さを0に上書きすることができます。 （CSSの特異性を読み取る）

Answer 2

コンポーネントのスタイル属性で最小高さを復元することができます。

@Component({ 
    selector: 'material-app', 
    templateUrl: 'app.component.html', 
    styles: [` 
md-tab-group { 
    background:#fff; 
    min-height:0; 
} 
    `], 
    directives: [MD_TABS_DIRECTIVES] 
})