Проблема с высотой вложенности материала AngularJS

У меня есть какая-то проблема, связанная с материалом 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>

создает этот в firefox.

и this на chrome.

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

ОТВЕТЫ

Ответ 1

У меня также была аналогичная проблема. Хотя 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>

Ответ 2

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

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

  • Это не будет исправлено командой в ближайшее время (см. комментарий ThomasBurleson от 10 июня 2016 года здесь: https://github.com/angular/material/issues/2254)

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

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

ВАЖНАЯ ЗАПИСКА ОБ СОТРУДНИЧЕСТВЕ СОЗДАННЫХ КОМПОНЕНТОВ:

В моем случае моя html-структура - ng-outlet → custom-component → md-card → md-tabs

Я добавил 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');
    };
}

Ответ 3

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

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

Ответ 4

Вам нужно передать атрибут '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>