Question

使用Angular材质打开一个使用内容正文中的标签的对话框（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

Angular Material不能很好地计算宽度。这发生在我身上，我修复了它将md-stretch-tabs="always"添加到md-tabs并删除父容器上的flex：

<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容器上使用flex，因为它会在某些情况下失败。

Answer 2

我遇到了同样的问题，在尝试了各种方法之后，这终于奏效了：

在css文件中包含以下css代码：

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

角度材料标签不起作用（md-tabs）

2 个答案: