Question

我有一些麻烦用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上的

和this。

抱歉不直接发布图片我没有足够的声誉。

Answer 1

我也有类似的问题。虽然propagate-ineqs解决了它......

您可以尝试使用：

md-dynamic-height

Answer 2

如果您尝试解决的问题是标签没有占用完整的可用高度：

据我所知，通过现有的md属性来做这件事是不可能的（我花了几个小时研究这个）
团队不会很快修复它（请参阅2016年6月10日ThomasBurleson的评论：https://github.com/angular/material/issues/2254）
这是解决这个问题的方法，对我有用：

确保每个父元素都具有layout="column"和layout-fill属性（或layout-column和layout-fill类）。这包括 <ng-outlet>如果这与您的用例相关。

关于通过组件路由器创建的自定义组件的重要说明：

在我的情况下，我的html结构是ng-outlet - ＆gt; custom-component - ＆gt; md-card - ＆gt; MD-突片

我将layout="column"和layout-fill添加到<ng-outlet>和<md-card>，并将layout="column"添加到<md-tabs>。但是，我无法找到将它们添加到<account-component>的方法（因为它是由Angular动态创建的），所以我最终要做的就是将这个（有点hacky）代码添加到我的组件控制器（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');
    };
}

Answer 3

我不认为layout-fill在这种情况下会起作用，因为md-tab指定了标题和内容，而我认为你希望扩展内容以填充父级。

您可能想尝试将md-dynamic-height选项添加到md-tabs指令中，该指令应强制角度素材为标签设置一致的高度。

Answer 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>

AngularJS材料制表符高度问题

4 个答案: