What is the best way to ensure that a grid header row stays aligned with the rows that scroll below it

Utilizing the Grid layout feature of bootstrap, I crafted an overview where one row acts as a header that should remain fixed at the top of the grid under all circumstances.

The issue arises when the scrollbar appears, causing the layout to shift in a way that the header gets misaligned with the rows (Refer to the example below).

While placing the header inside the scrollable container resolves the layout problem, it also results in the header being scrolled out of view.

Is there a way to consistently align the content and the header regardless of the scroll bar being visible or not?

Example: Observe the slight misalignment of each column.

.max-height {
  max-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c7d8c5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3">
  <div class="row">
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
  </div>
  <div class="row overflow-auto max-height">
    <div class="col">
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
    </div>
  </div>
</div>

csstwitter-bootstrapbootstrap-5

Answer №1

How about considering this alternative approach?

I made the heading column sticky-top with a background color and then set the container to overflow-auto.

.max-height {
  max-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0ffe0fd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3 overflow-auto ">
  <div class="row sticky-top bg-white">
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
  </div>
  <div class="row max-height">
    <div class="col">
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
    </div>
  </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

Selecting Child Elements in CSS

Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...

htmlcsscss-selectors

Angular 13: Problems arise with custom theme in Angular Material version 13

I've set up a custom theme palette for my project that works perfectly with version ^12.2.13 of Angular Material, but not with ^13.2.3. Here's the SCSS code for my custom theming: my-custom-theme.scss @import '~@angular/material/theming&apo ...

cssangularsassangular-materialangular13

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

htmlcssbootstrap-5

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS ...

cssnode.jsexpressejs

Node.js has no trouble loading HTML files, however, it seems to encounter issues when trying to

Having a bit of trouble with my JavaScript skills as I try to load my index.html file (seems like it should be the 5th easiest thing to do in JavaScript). Let me get straight to the point; when I manually open my index.html, it loads perfectly WITH the CS ...

javascripthtmlcssnode.js

When you have a target element that is deeply nested, consider using a 50% height relative to

There is some confusion surrounding the issue below: <div class="container"> <div class="row"> <div class="group"> <a> <div class="col-lg-3 full-h"></div> </a> <a> < ...

htmlcssheight

Tips for stopping the web page from moving due to scrollbar placement?

On my website, I have DIVs that are center-aligned. However, some pages require scrolling while others don't. Whenever I switch between these two types of pages, the appearance of a scrollbar causes the page to move slightly to the side. Is there a wa ...

htmlcss

What is the best way to eliminate the excess space below the footer on a vuejs page?

I am developing a footer using vuejs along with buefy. In my implementation of App.vue below, I am encountering a white margin under the footer. // App.vue <template> <div id="app"> <main-header /> <router-view/ ...

htmlcssvue.js

The step-by-step guide to creating a dynamic Bootstrap grid through virtualization

When a Bootstrap grid wraps its columns into rows due to a smaller viewport width than the set breakpoint, it can alter the row height and cause interference with Razor virtualization that relies on knowing the element heights. How can I ensure smooth comp ...

razorbootstrap-5ui-virtualization

html how to delete the beginning and end of hr element

There is a <hr noshade> tag in my HTML code which does not have any effect on the web view. However, when I print it to a PDF file, it shows head and tail like this: https://i.stack.imgur.com/TaBAc.jpg Here is my CSS that applies styling when print ...

htmlcss

Images within inline blocks appear to be extending beyond their containing div as though they are

When I check my website in various browsers such as Firefox, IE, Edge, and Safari, I noticed that the images in the "My Specialties" section of the left column are extending outside of the div instead of fitting within it. This problem also occurs in Chrom ...

javascriptjqueryhtmlcss

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

How can I make the image and image select and delete buttons responsive? I am looking to eliminate the gap after the delete button. Any suggestions are welcomed. <div class="container mt-0"> <div class="row"> ...

javascripthtmlcsstwitter-bootstrap

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

htmlcssbootstrap-4

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding

Putting a Pause on CSS Transition using jQuery

I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...

javascriptjqueryhtmlcss

Struggling with organizing the layout of your HTML page? Let us lend

I am having difficulty with the layout of a page I'm working on. The lower page navigation is not positioning properly - it wraps below the left column instead of staying below the data columns. Additionally, the border for the navigation appears at t ...

csshtml

Placing an exit button beside an image for easy navigation

Here is a snippet of my code: <style type="text/css"> .containerdiv { position:relative;width:100%;display:inline-block;} .image1 { position: absolute; top: 20px; left: 10px; } </style> <div class="containerdiv"> <ima ...

javascripthtmlcss

Can Bootstrap CSS take precedence over a theme's styling?

After working with various WordPress theme templates, I am now ready to take on the challenge of creating my own custom themes. One aspect I would like to incorporate is utilizing Bootstrap to ensure my website is responsive. However, I have some questions ...

phphtmlcsswordpresstwitter-bootstrap

Using CSS to create hover effects for specific classes of elements

Is there a way to make the button change color on hover when hovering over anywhere in the navigation bar (.topNav) instead of just when hovering over the individual button elements (.top, .middle, .bottom classes)? I tried using span to achieve this, but ...

htmlcssangular