【问题标题】:Angular Material md-tabs: setting md-dynamic-height causing the tabs to scroll instead of the contentAngular Material md-tabs:设置 md-dynamic-height 导致标签滚动而不是内容
【发布时间】:2016-06-23 02:24:24
【问题描述】:

我正在尝试有角度的材料并使用 md-tabs,但是如果内容超过屏幕的长度,则在应用 md-dynamic-height 选项卡和内容时出于某种原因。我只是滚动的内容无法弄清楚我做错了什么。这是我正在做的一个例子。

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img  src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img  src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>

【问题讨论】:

标签: angular-material


【解决方案1】:

在 md 选项卡中尝试md-dynamic-height=""

<md-tabs md-dynamic-height="">

【讨论】:

    【解决方案2】:

    示例布局:

    <md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
        <md-tab label="1">
            <md-content style="height:100%">
             tab content here
            </md-content>
        </md-tab>
        <md-tab label="2">
            <md-content style="height:100%">
             tab content here
            </md-content>
        </md-tab>
        <md-tab label="3">
            <md-content style="height:100%">
             tab content here
            </md-content>
        </md-tab>
    </md-tabs>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-06-01
      • 2016-04-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-27
      • 1970-01-01
      • 2017-05-16
      相关资源
      最近更新 更多