Стол внутри модала обрезается - PullRequest
Новая
       7

Стол внутри модала обрезается

0 голосов
/ 25 декабря 2018

Я хочу иметь внутри модальной таблицы, которая показывает некоторые данные.но когда я устанавливаю размер таблицы больше 1 строки (я использую полосу прокрутки, поэтому каждый раз больше одной строки), моя таблица обрезается.Я хочу установить его как можно больше внутри модального окна, чтобы вы могли видеть как можно больше строк, не прокручивая полосу прокрутки вниз, но когда я установил высоту таблицы выше, чем на 100 пикселей, он начинает обрезаться.Вот пример: 

<!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>

1 Ответ

0 голосов
/ 25 декабря 2018

Отметьте эту строку, если вы вызываете модель, по умолчанию она вызывает меньшую модальную, но есть большую.Я полагаю, вы используете это. 

<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>
...