Question

我想在模态内有一个表来显示一些数据。但是，当我将表的大小设置为大于1行时（我使用滚动条，因此每次都大于一行），我的表被剪切了。我想将其设置为尽可能多地容纳在模态中，以便在不向下滚动滚动条的情况下可以看到尽可能多的行，但是当我将表格高度设置为100px以上时，它将开始被剪切。这是一个例子：

<!DOCTYPE html>
<html>
<head>
    <script src = "jquery.js"></script>
    <script src = "Sources/Chart.js"></script>
    <link rel = "stylesheet" type="text/css" href = 
"Sources/bootstrap.css">
    <script src = "client.js"></script>
    <link rel = "stylesheet" type="text/css" href = 
"Sources/MatirialIcons.css">
    <link rel = "stylesheet" type="text/css" href = 
"Sources/Matirialize.css">
    <script type = "text/javascript"
            src = "Sources/jquery-2.1.1.js"></script>
    <script src = "Sources/Matirialize.js"></script>
    <meta name="viewport" content="width=device-width, initial-
scale=1">

</head>
<body>
</div>
<button class = "btn waves-effect waves-light red" id = "SendBtn">
    <i class = "material-icons">send</i></button>
<!-- Modal Trigger -->
<a class="waves-effect waves-light red btn modal-trigger" 
href="#modal1">Show Data</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Server's test results</h4>
        <p id = "modalParagraph"></p>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect 
waves-green btn-flat">Close</a>
        <a href="#modal2" class=" waves-effect waves-light red btn 
modal-trigger">Data</a>
    </div>
</div>
<div id="modal2" class="modal">
    <div class="modal-content">
        <h4>Data Table</h4>
    </div>
    <div class="modal-footer">
        <div style="overflow:scroll;height:600px;width:100%;">
            <table style="width:100%;height:100%" id = 
"ModalChanTable">
                <tr id = "1">
                    <th>example1</th>
                    <th>example1</th>
                    <th>example1</th>
                </tr>
                <tr id = "2">
                    <th>example2</th>
                    <th>example2</th>
                    <th>example2</th>
                </tr>
                <tr id = "3">
                    <th>example3</th>
                    <th>example3</th>
                    <th>example3</th>
                </tr>
                <tr id = "4">
                    <th>example4</th>
                    <th>example4</th>
                    <th>example4</th>
                </tr>
                <tr id = "5">
                    <th>example5</th>
                    <th>example5</th>
                    <th>example5</th>
                </tr>
                <tr id = "6">
                    <th>example6</th>
                    <th>example6</th>
                    <th>example6</th>
                </tr>
                <tr id = "7">
                    <th>example7</th>
                    <th>example7</th>
                    <th>example7</th>
                </tr>
            </table>
        </div>
        <a href="#!" class=" modal-action modal-close waves-effect 
waves-green btn-flat">Close</a>
    </div>
</div>
</body>
</html>

Answer 1

选中此行，如果调用模型，则默认情况下调用较小的模态，但有较大的模态。我猜你用这个。

<div id="modal1" class="modal modal-lg">//I added modal-lg to the class
    <div class="modal-content">
        <h4>Server's test results</h4>
        <p id = "modalParagraph"></p>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect 
waves-green btn-flat">Close</a>
        <a href="#modal2" class=" waves-effect waves-light red btn 
modal-trigger">Data</a>
    </div>
</div>

模式中的表格已被切除

1 个答案: