Twitter Bootstrap Question posted in

DataTables pagination could be over the Bootstrap Fixed Footer of the ASP.NET Core MVC project template-Twitter bootstrap

I am working with ASP.NET Core 3.1 MVC and Bootstrap 4.4.1 and the default project template with DataTables.js (1.10.20 and css twitter bootstrap).

The first thing I must say is that I’m not good at all with css, so I think this could be the reason of this problem.

The following problem occurs when the screen has a lower resolution: (Tested resolution: 400×500)

Footer behind pagination

I would like to know why this happened with the Fixed Footer and if there is a fix for this.

Thanks in advance for any assistance.

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>
Tags:

3

Answers


  1. 0

    you can change the position of the footer to static then it will be fixed.

    Login or Signup to reply.
  2. 0

    Try remove posistion:absolute in footer class

    .footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}
    Login or Signup to reply.
  3. 0

    I used CSS flex to reduce the change to your markup.

    The change I did were:

    1. I added class content to your main content.
    2. I changed the style for body to have these styles
    body {
   display: flex;
   flex-direction: column;
   height: 100vh;
}
    1. Then I added these, and also updated the style for your .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>

    You can see it working here:
    https://jsfiddle.net/8ba9cdxe/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search