AngularJS Материал Tab высота проблема

Question

У меня возникли некоторые troube выясняя вещи с AngularJS материала, мне было интересно, если кто-нибудь знает, почему феллинг кусок кода:

<md-tabs layout-fill > 

    <md-tab id="tab1"> 
     <md-tab-label>Item One</md-tab-label> 
     <md-tab-body> 

      <md-list> 
       <md-subheader class="md-no-sticky">3 line item</md-subheader> 
       <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]"> 

        <div class="md-list-item-text"> 
         <h3>sdfs</h3> 
         <h4>sdfsd</h4> 
         <p>sdfsdf</p> 
        </div> 
       </md-list-item> 

      </md-list> 
     </md-tab-body> 
    </md-tab> 

</md-tabs> 

производит this на светлячок.

и this на хром.

Извините, что не публиковали изображения напрямую. У меня недостаточно репутации.

Answer 1

Я не думаю, что layout-fill будет работать так, как вы намереваетесь в этом случае, потому что md-tab указывает заголовок и контент, тогда как я думаю, вы хотите, чтобы контент расширялся, чтобы заполнить родительский элемент.

Возможно, вы захотите добавить опцию md-dynamic-height к директиве md-tabs, которая должна заставлять угловой материал устанавливать согласованную высоту по вкладкам.

Answer 2

Вам необходимо передать атрибут 'md-dynamic-height' в директиву yr md-tabs. Ниже код будет работать нормально.

<md-content layout="column"> 
     <md-tabs md-dynamic-height flex> 

     <md-tab id="tab1"> 
      <md-tab-label>Item One</md-tab-label> 
      <md-tab-body> 
      <md-list> 
       <md-subheader class="md-no-sticky">3 line item</md-subheader> 
       <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]"> 
       <div class="md-list-item-text"> 
        <h3>sdfs</h3> 
        <h4>sdfsd</h4> 
        <p>sdfsdf</p> 
       </div> 
       </md-list-item> 
      </md-list> 
      </md-tab-body> 
     </md-tab> 

     <md-tab id="tab2"> 
      <md-tab-label>Item Two</md-tab-label> 
      <md-tab-body> 
      <md-list> 
       <md-subheader class="md-no-sticky">3 line item</md-subheader> 
       <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]"> 
       <div class="md-list-item-text"> 
        <h3>sdfs</h3> 
        <h4>sdfsd</h4> 
        <p>sdfsdf</p> 
       </div> 
       </md-list-item> 
      </md-list> 
     </md-tab-body> 
     </md-tab> 

    </md-tabs> 
</md-content> 

Answer 3

У меня также была аналогичная проблема. Хотя md-dynamic-height решил его ...

Вы можете попробовать использовать:

<md-tabs md-dynamic-height> 
    <md-tab> 
    <md-tab-label>Tab label</md-tab-label> 
    <md-tab-body> 
     <md-content>The tab content</md-content> 
    </md-tab-body> 
    </md-tab> 
</md-tabs> 

Answer 4

Если проблема вы пытаетесь решить, что вкладки не занимают всю доступную высоту:

1. Насколько я знаю, это невозможно сделать с помощью существующих атрибутов md (и я потратил часы, исследуя это)

2. Это не будет изменено командой anyt IME скоро (см комментарий от ThomasBurleson 10 июня 2016 здесь: https://github.com/angular/material/issues/2254)

3. Вот способ, чтобы исправить это, что работает для меня:

   Убедитесь, что каждый родительский элемент имеет layout="column" и layout-fill атрибуты (или layout-column и layout-fill классы). Это включает в себя <ng-outlet>, если это имеет значение для вашего прецедента.

ВАЖНО О пользовательских компонентов СОЗДАВАЕМЫХ VIA КОМПОНЕНТ роутера:

В моем случае мой HTML структура нг-розетка -> заказ компонент -> мкр-карта -> мкр-язычки

Я добавил layout="column" и layout-fill в <ng-outlet> и <md-card> и добавил layout="column" в <md-tabs>.Тем не менее, я не мог найти способ добавить их к <account-component> (потому что он создан динамически с помощью Angular), так что я в конечном итоге добавляю этот (несколько взломанный) код к моему контроллеру компонентов (ES6), но должен быть понятным, даже если вы пишете ES5):

import template from './account.html'; 

export const accountComponent = { 
    template: template, 
    controller: accountController, 
}; 

/*@ngInject*/ 
function accountController (accountService) { 
    this.data = accountService.getAccountData(); 

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/ 
    this.$routerOnActivate = function() { // nextRoute 
     const classes = document.querySelector('account-component').classList; 
     classes.add('layout-column'); 
     classes.add('layout-fill'); 
    }; 
}