角度のある素材のタブが動作しない（MDタブ）

Question

角度のある素材を使用して、コンテンツ本体のタブを使用するダイアログを開きます（https://material.angularjs.org/latest/demo/dialog）。今、ダイアログがポップアップしていますが、最初のタブの内容を見ることができ、あるタブから別のタブに切り替えるためのタブオプションが表示されません。 htmlスニペットの追加：

<md-dialog-content style="max-width:800px;max-height:810px; "> 
     <md-tabs md-dynamic-height md-border-bottom> 
     <md-tab label="one"> 
      <md-content class="md-padding"> 
      <h1 class="md-display-2">Tab One</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p> 
      </md-content> 
     </md-tab> 
     <md-tab label="three"> 
      <md-content class="md-padding"> 
      <h1 class="md-display-2">Tab Three</h1> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      </md-content> 
     </md-tab> 
     </md-tabs> 
    </md-dialog-content> 

Answer 1

角度のある材質の幅がうまく計算されていません。これは私に起こったと私はそれがmd-tabsにmd-stretch-tabs="always"を追加し、親コンテナにフレックス削除する固定：この変更を行う

<div> 
    <md-content> 
     <md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom> 
      <md-tab label="three"> 
       <md-content class="md-padding"> 
        <h1 class="md-display-2">Tab Three</h1> 
        <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum.</p> 
       </md-content> 
      </md-tab> 
     </md-tabs> 
    </md-content> 
</div> 

はAngularJSがよく、タブのサイズ変更を計算します。いくつかのシナリオでは失敗するので、注意してフレックスをmd-tabsコンテナに使用しないでください。

Answer 2

私は同じ問題を抱えていたし、さまざまな方法を試した後、これは最終的に働いた：

は、あなたのCSSファイルに以下のCSSコードを含める：

md-pagination-wrapper { 
    width:500px !important; 
}