Creating a dynamic table inside a flex-grow container without disrupting the layout: A step-by-step guide

Question

Creating a dynamic table inside a flex-grow container without disrupting the layout: A step-by-step guide

Currently, I am in the process of designing a responsive layout using Bootstrap 5.3 which consists of a NavBar, SideBar, ContentPanel, and StatusBar. The goal is to ensure that the application always occupies 100% of the view-height and view-width, displaying all necessary information without triggering page scrollbars!

Within the ContentPanel, there is an element at the top, a table containing dynamic values, and another element at the bottom. I aim for the table to utilize as much height as possible without displacing the element below it or extending beyond the viewport, impacting the StatusBar!

Everything looks good when there are only a few rows in the table, like this:

https://i.sstatic.net/TzNrx.png

However, issues arise as the table accumulates more rows: the table starts pushing the element below it and the StatusBar out of the viewport, triggering a vertical scrollbar for the entire page. An example of this is shown here:

https://i.sstatic.net/5YzyJ.png

If the content within the table exceeds the size of the ContentPanel, I wish for a scrollbar to be visible inside the table itself, confined within the ContentPanel. This way, users can scroll through the table rows without losing sight of the StatusBar. The table should occupy the remaining height of the ContentPanel after the other elements have been rendered.

Thus far, I have only managed to achieve this by setting a maximum height on the table, but this solution compromises responsiveness, as illustrated here:

[

Would appreciate any assistance with this dilemma. Here is my example on StackBlitz: https://stackblitz.com/edit/jyee1m?file=index.html

html css twitter-bootstrap flexbox bootstrap-5

Answer 1

Answer №1

Utilize the vh-100 class to apply height: 100vh to the main <div> element encapsulating the entire webpage. This class, combined with a vertical flex layout, serves to constrain the sizing of internal elements.

To counteract the default min-height: min-content imposed by vertical flex layouts, we introduce min-height: 0 to specific inner elements.

By utilizing mh-100 and setting max-height: 100%, a vertical flex layout is invoked to enforce a height restriction on the ContentPanel <div> in relation to its parent container. This ensures that the inner .scrollable-table element is constrained accordingly.

.scrollable-table {
  overflow-y: auto;
}

.min-h-0 {
  min-height: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadfc4d9c4d8">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f64796478">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="m-0 p-0 border-0 bd-example bd-example-flex">
    <div class="vh-100 d-flex flex-column vh-100">
      <div class="d-flex flex-grow-1 min-h-0">
        <nav class="border p-2">NavBar</nav>
        <aside class="border p-2">SideBar</aside>
        <div class="border p-2 flex-grow-1 d-flex flex-column min-h-0 mh-100">
          ContentPanel

          <div>Element above table</div>
          <div class="scrollable-table min-h-0">
            <table class="table" class="table-responsive">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First Name</th>
                  <th scope="col">Last Name</th>
                  <th scope="col">Username</th>
                </tr>
              </thead>
              <tbody> <!-- Table content omitted for brevity -->
              </tbody>
            </table>
          </div>
          <div>Element below table</div>
        </div>
      </div>
      <div class="border">StatusBar</div>
    </div>
  </body>
</html>

Answer 2

Utilize the vh-100 class to apply height: 100vh to the main <div> element encapsulating the entire webpage. This class, combined with a vertical flex layout, serves to constrain the sizing of internal elements.

To counteract the default min-height: min-content imposed by vertical flex layouts, we introduce min-height: 0 to specific inner elements.

By utilizing mh-100 and setting max-height: 100%, a vertical flex layout is invoked to enforce a height restriction on the ContentPanel <div> in relation to its parent container. This ensures that the inner .scrollable-table element is constrained accordingly.

.scrollable-table {
  overflow-y: auto;
}

.min-h-0 {
  min-height: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadfc4d9c4d8">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f64796478">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="m-0 p-0 border-0 bd-example bd-example-flex">
    <div class="vh-100 d-flex flex-column vh-100">
      <div class="d-flex flex-grow-1 min-h-0">
        <nav class="border p-2">NavBar</nav>
        <aside class="border p-2">SideBar</aside>
        <div class="border p-2 flex-grow-1 d-flex flex-column min-h-0 mh-100">
          ContentPanel

          <div>Element above table</div>
          <div class="scrollable-table min-h-0">
            <table class="table" class="table-responsive">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First Name</th>
                  <th scope="col">Last Name</th>
                  <th scope="col">Username</th>
                </tr>
              </thead>
              <tbody> <!-- Table content omitted for brevity -->
              </tbody>
            </table>
          </div>
          <div>Element below table</div>
        </div>
      </div>
      <div class="border">StatusBar</div>
    </div>
  </body>
</html>

Answer 3

Answer №2

To achieve the desired layout, it's essential to assign a fixed height to the status bar to maintain consistency across different screen sizes. Additionally, apply the CSS property max-height: calc(100vh - 27px); to the content wrapper and utilize the Bootstrap class overflow-auto on the scrollable table to ensure the scrollbar appears within the table's boundaries. Finally, ensure the content wrapper has the classes d-flex and flex-column.

Refer to the example below for implementation details.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e9a88989895">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
  <title>Example using Bootstrap</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="453730302b2c2b2d3e1f3d2f0d1a6533832381">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .status {
      height: 25px;
    }
    
    .content {
      max-height: calc(100vh - 27px);
    }
  </style>
</head>

<body class="m-0 p-0 border-0 bd-example bd-example-flex">
  <div class="vh-100 d-flex flex-column">
    <div class="d-flex flex-grow-1">
      <nav class="border p-2">NavBar</nav>
      <aside class="border p-2">SideBar</aside>
      <div class="border p-2 flex-grow-1 content d-flex flex-column">
        ContentPanel

        <div class="above-table">Element above table</div>
        <div class="scrollable-table overflow-auto">
          <table class="table" class="table-responsive">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              ...
              Additional table rows go here
              ...
              <tr>
                <th scope="row">20</th>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="below-table">Element below table</div>
      </div>
    </div>
    <div class="border status">StatusBar</div>
  </div>
</body>

</html>

Answer 4

To achieve the desired layout, it's essential to assign a fixed height to the status bar to maintain consistency across different screen sizes. Additionally, apply the CSS property max-height: calc(100vh - 27px); to the content wrapper and utilize the Bootstrap class overflow-auto on the scrollable table to ensure the scrollbar appears within the table's boundaries. Finally, ensure the content wrapper has the classes d-flex and flex-column.

Refer to the example below for implementation details.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e9a88989895">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
  <title>Example using Bootstrap</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="453730302b2c2b2d3e1f3d2f0d1a6533832381">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .status {
      height: 25px;
    }
    
    .content {
      max-height: calc(100vh - 27px);
    }
  </style>
</head>

<body class="m-0 p-0 border-0 bd-example bd-example-flex">
  <div class="vh-100 d-flex flex-column">
    <div class="d-flex flex-grow-1">
      <nav class="border p-2">NavBar</nav>
      <aside class="border p-2">SideBar</aside>
      <div class="border p-2 flex-grow-1 content d-flex flex-column">
        ContentPanel

        <div class="above-table">Element above table</div>
        <div class="scrollable-table overflow-auto">
          <table class="table" class="table-responsive">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              ...
              Additional table rows go here
              ...
              <tr>
                <th scope="row">20</th>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="below-table">Element below table</div>
      </div>
    </div>
    <div class="border status">StatusBar</div>
  </div>
</body>

</html>

Creating a dynamic table inside a flex-grow container without disrupting the layout: A step-by-step guide

Answer №1

Answer №2

Similar questions

The difference in percentage padding rendering is specific to Firefox only

Having an issue with Local Storage returning undefined

Incapable of grasping the intricacies of condensed

general declarations take precedence over media queries

Troubleshooting challenges arise with Bootstrap's button group spacing issue

The most recent release of Angular UI Bootstrap is being set up for installation

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

Creating a dropdown menu in Bootstrap 5 without using any of the Bootstrap

Verify the text file for any data, and if it contains any, display it on the web browser using JavaScript

Trouble accessing modal in custom WordPress theme incorporating Bootstrap

Setting the width of an image within an iframe: A step-by-step guide

Unable to change the variable for the quiz

Leveraging the power of jQuery and Bootstrap within an application customizer and across various web

What could be the reason for having two HTML nodes within a one-node HTML document?

What is the best way to update the video source upon clicking a link with JQuery?

How to choose an option from a dropdown menu using React

Implementing a specialized CSS handler for Node.JS

How come my Calendar is not showing up on the browser?

A guide on utilizing jQuery to increase the value of an index

Top-rated program for creating user guides using HTML code