названия не отображается правильно в угловых закладках материала

Question

Я использую угловые материальные вкладки, но есть что-то не так с моей реализацией, и это дает мне этот результат (на Chrome и Firefox):

Как вам можно увидеть, что заголовки вкладок усечены. Вот моя реализация: HTML:

<md-tabs> 
    <md-tab ng-repeat="tab in tabs"> 
     <md-tab-label>{{tab.titre}}</md-tab-label> 
     <div class="md-tabs-content"> 
      content tab 
     </div> 
    </md-tab> 
</md-tabs> 

JS:

var tabs = []; 
for(i=0;i<3; i++){ 
    tabs.push({ 

     titre: 'title' 
    }); 
} 
$scope.tabs = tabs; 
$scope.selectedTab = 0; 

Добавлена ​​plnkr: http://plnkr.co/edit/nFMFmaGpLUwJPxRd1TpT?p=preview

Answer 1

Цитируя Angularmaterial docs для md-tab

Пожалуйста, обратите внимание, что если вы используйте <md-tab-label>, ваш контент ДОЛЖЕН быть завернут в тег <md-tab-body>. Это означает четкое разделение между содержимым вкладки и меткой табуляции.

Так может вы пытаетесь изменить свой код:

<md-tabs> 
    <md-tab ng-repeat="tab in tabs"> 
     <md-tab-label>{{tab.titre}}</md-tab-label> 
     <md-tab-body class="md-padding"> 
      content tab 
     </md-tab-body> 
    </md-tab> 
</md-tabs>