Нумерация страниц DataTables может превышать фиксированный нижний колонтитул Bootstrap шаблона проекта ASP. NET Core MVC. - PullRequest
Новая
       15

Нумерация страниц DataTables может превышать фиксированный нижний колонтитул Bootstrap шаблона проекта ASP. NET Core MVC.

0 голосов
/ 18 апреля 2020

Я работаю с ASP. NET Core 3.1 MVC и Bootstrap 4.4.1 и шаблоном проекта по умолчанию с DataTables. js (1.10.20 и css twitter bootstrap) ,

Первое, что я должен сказать, это то, что я не очень хорош с css, поэтому я думаю, что это может быть причиной этой проблемы.

Следующая проблема возникает, когда разрешение экрана ниже: (протестированное разрешение: 400x500)

Footer behind pagination

Я хотел бы знать, почему это произошло с Fixed Footer и если есть исправить это.

Заранее благодарим за любую помощь. 

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebApplication1</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />      <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
            <footer class="border-top footer text-muted text-center">
    <div class="container">
        Footer
    </div>
</footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js"></script>
    </body>
</html>

Ответы [ 3 ]

1 голос
/ 18 апреля 2020

Я использовал CSS flex, чтобы уменьшить изменения в вашей разметке.

Я сделал следующие изменения:

  1. Я добавил класс content в ваш основной контент.
  2. Я изменил стиль для body, чтобы эти стили 
body {
   display: flex;
   flex-direction: column;
   height: 100vh;
}
Затем я добавил их, а также обновил стиль для вашего .footer 
header {
  flex: 0 0 50px;
}
.content {
  flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    width: 100%;
    line-height: 60px; /* Vertically center the text there */
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: 0 0 50px;
}
.content {
  flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    width: 100%;
    line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>
    <div class="content container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
    <footer class="footer border-top footer text-muted text-center">
        <div class="container">
            Footer
        </div>
    </footer>
</body>

Вы можете увидеть, как это работает здесь: https://jsfiddle.net/8ba9cdxe/

0 голосов
/ 18 апреля 2020

Попробуйте удалить позицию: абсолютная в классе нижнего колонтитула 

.footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
0 голосов
/ 18 апреля 2020

Вы можете изменить положение нижнего колонтитула на stati c, тогда оно будет исправлено.

...