Utilizing Bootstrap 5's table design to occupy the rest of the available vertical

In my .NET Core 7 MVC project, I am facing a challenge where I want to make a details table scroll and occupy the available vertical space on the screen dynamically.

I have tried using h-25, h-50 classes to achieve the scrolling effect on the table. However, this approach only sets a static height for the table, which does not adjust when the page size changes or if a row collapses above it.

You can view a demonstration of this issue in this updated JSFiddle.

Below is an example code snippet that represents my attempt to address the problem:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d4c8d5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div b-vtqmm3i4v1 class="container-fluid overflow-hidden vh-50">
...
        </div>
      </div>
    </div>
  </main>
</div>

htmljquerycssbootstrap-5

Answer №1

Within this flexbox column setup, there are two rows. The initial row defaults to auto height, while the second row expands to occupy the remaining space. Additionally, the overflow setting for the second row is set to auto (it's important to note that scrolling happens within the flex row and not directly with the table).

Avoid specifying fixed heights for elements within a flex layout. The only height that should be explicitly defined is that of the container, preferably set to 100vh.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced2ced3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<main b-vtqmm3i4v1 role="main" class="d-flex flex-column vh-100">
  <div id="header" class="p-3 bg-secondary">
    Header
  </div>

  <div id="details" class="flex-grow-1 overflow-auto">
    <div class="table-responsive h-100 p-3">
      <table class="table table2">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Country</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
... (content continues) ...</answer>
<exanswer1><div class="answer accepted" i="75747113" l="4.0" c="1678884848" m="1678895960" v="1" a="aXNoZXJ3b29k" ai="1264804">
<p>This is a fundamental flexbox column structure featuring two rows. The first row automatically adjusts its height, while the second one <a href="https://getbootstrap.com/docs/5.2/utilities/flex/#grow-and-shrink" rel="nofollow noreferrer">expands</a> to fill the available space. Moreover, the second row employs auto overflow. (Important to clarify that it's actually the flex row that scrolls, not the table.)</p>
<p>It's recommended to avoid imposing fixed heights on elements within a flex layout. The sole height parameter to be specified is that of the parent container, ideally set to 100vh.</p>
<p><div>
<div>
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced2ced3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<main b-vtqmm3i4v1 role="main" class="d-flex flex-column vh-100">
  <div id="header" class="p-3 bg-secondary">
    Header
  </div>

  <div id="details" class="flex-grow-1 overflow-auto">
    <div class="table-responsive h-100 p-3">
      <table class="table table2">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Country</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>0</td>
            <td>First last</td>
            <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294f45485a5d694e44484045074a4644">[email protected]</a></td>
            <td>123 Any Street MyTown State 00000</td>
            <td>USA</td>
            <td>555.867.5309</td>
          </tr>
          <tr>
            <td></td>
            <td colspan="5">This is my text. It can extend into a long paragraph discussing various topics like beefcake pantyhose and the peculiar occurrences in Bob Dylan's anecdotes. How old is he anyway? Maybe close to a millennium by now but still actively touring.</td>
          </tr>
		  	... (additional table rows) ...
...
		  </tbody>
	  </table>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to access an Ajax response outside of its function using JQuery?

Just starting out with JQuery and wondering how to utilize the Ajax response ( HTTP GET ) outside of the function in my code snippet below: $.ajax ({ type: "GET", url: "/api", success: success, error: error ...

javascriptjqueryajax

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

javascriptjqueryjsonhtmlelectron

Challenges with window opening function while already in fullscreen view

Unsure of what might be causing the issue, but here's the problem... My code to open a new window is as follows: var opts = 'location=0,toolbar=0,menubar=0,scrollbars=0,resizable=0,height=450,width=300,right=350'; window.open('/' ...

javascriptjqueryuser-interfacewindow.open

Repetitive invocation of functions

I am presenting a listing HTML structure as follows <li class="game-box showlist" id="papp_1249" data-tag="Junior KG,Maths"> <div class="game-box-link" data-id="1249" data-active="yes" data-orientation="landscape" data-ajax="fal ...

javascriptjqueryjquery-mobile

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

Is it possible to create separate layouts for mobile devices and tablets using jQuery mobile?

Currently building a jQuery mobile app and looking to implement two distinct designs/layouts, one for mobile devices and another for tablets. Is this achievable? If yes, how can it be done? Any specific code required? Cheers! Noah ...

htmljquery-mobilemobiletablet

Automatically save a dropdown menu selection

Is there a way to automatically save the data selected in a drop down list without having to click on a save button? public ActionResult SelectFeedBack(int id) { YelloAdminDbContext db = new YelloAdminDbContext(); ViewBag.FeedBack ...

htmlasp.net-mvc-4asp.net-mvc-controller

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

javascripthtmlcsstwitter-bootstrapreactjs

Prevent users from clicking by using a CSS class in HTML and JavaScript

,hey there buddy 1° Can you help me figure out how to prevent click behavior using the CSS class? 2° I'm unable to add an ID to the HTML element, so I need to use the Class to achieve this. 3° None of my attempts have been successful so far. El ...

javascripthtmljquerycssjquery-ui

You will need to return a string instead of a Json Object in order for it to function correctly

I am facing an issue where I need to return a list of json objects to the view, but it seems to be causing problems because it's being returned as an object. It works fine if I return a string or a list of strings instead. However, what I really need ...

c#jqueryasp.net-mvcjson

Guide on effectively sending a secondary parameter in an ajax request

Struggling to implement a year/make/model multi-select feature, I have managed to get the scripts working. However, what appears to be missing is the ability to pass both a year and make variable together in order to fetch the final model results. Below a ...

javascriptphpjqueryajax

Picture is not appearing on web browser within Node application

Recently, while working with Visual Studio Code, I decided to incorporate an image into my Node project. After downloading the image from the internet and placing it in the directory, I renamed it to 'file_2.jpeg'. I then included <img src = " ...

htmlcssnode.jsvisual-studio-code

"Returning undefined: The outcome of using jQuery's .html() method on

I am having an issue with the JavaScript function I have created to load content from another URL into the current document. For some reason, both contentHtml and menuHtml variables are showing as undefined. Can someone please help me identify where I we ...

javascriptjqueryhtml

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

jquerycsshtmlcanvas

What is the best way to verify the success of two ajax requests?

There are two ajax requests being made to check the availability of two images. Below is the code for these ajax calls: if (result['img_one'] !== '') { var src_one = "blah-blah-one.jpg"; $.ajax({url: src_one, success: ...

jqueryajax

Utilizing eval properly in JavaScript

One method I am using is to load a different audio file by clicking on different texts within a web page. The jQuery function I have implemented for this purpose is as follows: var audio = document.createElement('audio'); $(".text_sample ...

javascriptjqueryaudioeval

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

In my quest for mobile functionality, I'm aiming to implement a feature on devices where tapping will open 'codepen.io' (triggered by ng-click), and tap and hold will display a context menu with the option to 'Open In New Tab', red ...

javascripthtmliosangularjsionic-framework

Achieving perfect alignment for CSS heading and floated controls in the center of the page

I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned. Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the headi ...

cssvertical-alignment

Animation doesn't apply to child components, but is successful when applied to the parent component

I am working on animating the width of a child component's div. Here is my simple code: export const OuterComponent = () => { const sidebarCtx = useContext(SidebarContext); const style = "w-[100px] h-[60px] transit ...

cssreactjscss-transitionstailwind-css

Building CSS Using TagBuilder in .NET Core

Can you provide guidance on utilizing the Tag Builder CSS Class? I am interested in integrating it into a style class .custom-image { max-width: 100%; max-height: 100%; padding: 0; background-color: white; } TagBuilder image = new TagBuilder("img"); Wh ...

c#css.netasp.net-core.net-core