带有 Angular Material 动态高度选项卡的可滚动内容元素

本文介绍了带有 Angular Material 动态高度选项卡的可滚动内容元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

这个问题出现了severaltimes Angular Material，但我无法为 v1.0.5 提出任何建议.整个页面(或 flex 容器)滚动，将标签移出视图.

如何实现可滚动的全高内容元素?

<md-tabs md-dynamic-height md-border-bottom><md-tab label="one"><md-content class="md-padding">

演示小提琴

用于合并自定义滚动条的奖励业力.

解决方案

我已经解决了.通过删除 dynamic-height 指令，然后使用绝对定位，它可以工作:

.tabs-wrapper {位置:相对；}.全尺寸 {位置:绝对；顶部:0；右:0；底部:0；左:0；}<div ng-app="沙盒"><div flex class="tabs-wrapper"><md-tabs class="full-size" md-border-bottom>

小提琴演示

需要绝对定位才能获取要展开的 flex 元素的子元素.

注意:小提琴演示中的高度不正确.我的项目没有出现这个问题.

This question has come up several times during the evolution of Angular Material, but I'm not able to make any of the suggestions work for v1.0.5. The entire page (or flex container) scrolls, moving the tabs out of view.

How can I achieve scrollable, full-height content elements?

<div flex>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
            <md-content class="md-padding">

Demo fiddle

Bonus Karma for incorporating custom scrollbars.

解决方案

I've worked it out. By removing the dynamic-height directive, then using absolute positioning, it's working:

.tabs-wrapper {
    position: relative;
}
.full-size {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div ng-app="sandbox">
    <div flex class="tabs-wrapper">
        <md-tabs class="full-size" md-border-bottom>

Fiddle demo

Absolute positioning is required to get the child of a flex element to expand.

Note: The height is incorrect in the fiddle demo. This problem doesn't occur in my project.

这篇关于带有 Angular Material 动态高度选项卡的可滚动内容元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！