在模态中实现标签不显示内容

Question

我正在使用 materialize 创建一个模式，我试图在其中放置 swipe-able 个标签。

奇怪的是选项卡 header 出现了，但选项卡内容根本没有出现。我该如何解决这个问题？

这是我的 fiddle jsfiddle 让我告诉你这是从文档中复制的所有代码

<div id="profession-registration-modal" class="modal">
<div class="modal-content">
    <h4>Register your profession</h4>

    <div class="row">
        <div class="col s12">
            <ul id="tabs-swipe-demo" class="tabs">
                <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
                <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
                <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
            </ul>
            <div id="test-swipe-1" class="col s12 blue">Test 1</div>
            <div id="test-swipe-2" class="col s12 red">Test 2</div>
            <div id="test-swipe-3" class="col s12 green">Test 3</div>
        </div>
    </div>

</div>
<div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>

Answer 1

标签内容的高度默认设置为height: 0px。您可以在 css 中设置它：

div.tabs-content.carousel.carousel-slider {
  height: 200px !important;
}

jsfiddle

在模态中实现标签不显示内容

Materialize tabs in modal not showing content

css

tabs

modal-dialog

materialize