Tips for synchronizing the height of a scrollable list-group column with a neighboring column

Within my Bootstrap 4 layout, I have a column on the left that includes a dynamically generated .list-group, which could potentially contain numerous .list-group-items.

On the right side, there is another column showcasing multiple cards inside a .row. The number of cards displayed here can be quite extensive...

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

<h3 class="text-secondary pb-3">Header</h3>

<div class="row">

   <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 7000px; overflow-y: scroll;">
     <div class="list-group list-unstyled">
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
     </div>
   </div>
   <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9>
       <div class="row">
        Many cards are present within this row, housed in .col-lg-4 columns.
       </div>
    </div>

 </div>

If the content on the right-hand side exceeds that of the left-hand .list-group, I want the height of the .list-group to be limited and independently scrollable.

I've successfully achieved this by applying the CSS rule overflow-y: scroll; to the containing column, which works well...

https://i.sstatic.net/bT0wr.gif

The challenge lies in manually setting the height of the column to something like max-height:7000px;.

This approach runs the risk of cutting off the viewable area of the left-hand .list-group based on the content's volume on the right. Ideally, the bottom of the left-hand .list-group should align with the adjacent right-hand content, while still enabling independent scrolling...

https://i.sstatic.net/kTPdi.gif

Is there a way to ensure that if the left-hand column or the .list-group is longer than the right-side content, its visible height adjusts to match that of the content on the right?

This adjustment should retain overflow-y: scroll; for vertical scrolling if the list extends beyond the content on the right.

An ideal solution would utilize Bootstrap 4 styles without requiring custom CSS rules.

cssbootstrap-4

Answer №1

To enable overflow scroll, a fixed height is required instead of using auto. Adjust the height of the scroll area dynamically with jQuery based on the height of the cards area.

If content is generated dynamically, a timeout should be set before equalizing the heights.

Below is an example utilizing jQuery. It retrieves the height of the cards area and applies it to the list group area.

HTML

<h3 class="text-secondary pb-3">Header</h3>

<div class="row">
   // Assign a class to the list group area and specify height rather than max-height
   <div class="list-group-area col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="height: 300px; overflow-y: scroll;">
     <div class="list-group list-unstyled">
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
     </div>
   </div>

   // Assign a class to the card area
   <div class="cards-area col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
       <div class="row">
        Numerous cards within this row, contained in .col-lg-4 cards.
       </div>
    </div>

 </div>

JavaScript:

    $(document).ready(function() {
      // Delay
      setTimeout(function() { 
        $('.list-group-area').height($('.cards-area').height());
      }, 1000);
    });

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

The v-bind class feature is failing to update the CSS on the object's properties

I'm attempting to dynamically modify the CSS of certain buttons based on object properties within a list. Below is the data I am rendering out, and despite following the documentation and ensuring my setup is correct, I seem to be overlooking somethin ...

csslistvue.js

Tips for creating the ultimate footer section on your webpage

I'm trying to position the footer div (id="Footer") 10px from the bottom of the screen. Regardless of whether the page content fills the entire height of the screen or creates a scroll area, I want the div to always be at the very bottom with a 10px m ...

csshtmlxhtmlresponsive-design

How to alter the color of an inline SVG within an <img> element

Is it possible to change the color of an SVG image, icon, or logo within an inline HTML <img> tag using style="..."? Below is a snippet of my code featuring a button with a logo that I want to change the color of: <a href="#" ...

htmlcsssvgbootstrap-5inline

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

javascriptcss

Restricting CSS Background Image Width to 960 Pixels

My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body. body { width:960px; margin: 10px auto 10px auto; background-image:url(logo.png),url(backgroundimage.jpg); ...

htmlcss

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

htmlcsspseudo-element

Arrows on the button are unresponsive and there seems to be an incorrect number of

I've been working on a project by combining various examples I found online. I'm puzzled as to why it's displaying all the buttons at once instead of just one per page, and why the number of visible buttons decreases by one with each right c ...

javascripthtmlcss

Image placed as background for registration form

In my Vue project, I am trying to create a login form with an image as the background. However, I am facing an issue where the image is not displaying on the page. Can someone guide me on how to add a picture behind the form? HTML: Below is the HTML code ...

htmlcssvue.js

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

htmlcsspositioning

Having trouble integrating reactstrap into my web development project

I've been attempting to incorporate reactstrap into my react project by using commands like "npm i reactstrap react react-dom" or "npm install --save reactstrap react react-dom", but I keep encountering errors every time. I've searched on Stack ...

reactjsbootstrap-4reactstrap

What is the best way to position a div below a sticky navbar?

I have implemented a sticky navbar on my index page along with JavaScript code that adjusts the navbar position based on screen height. When scrolling, the navbar sticks to the top of the page, but the flipping cube overlaps with the sticky navbar. How can ...

javascripthtmljquerycssnavbar

Transitioning the image from one point to another

I am currently working on a unique single-page website and I have been experimenting with creating dynamic background animations that change as the user scrolls. Imagine my website is divided into four different sections, each with its own distinct backgro ...

javascriptjquerycss

Overlapping divs are observed when utilizing absolute positioning in CSS

I am facing a challenge with placing the div identified by our_team below the div with the ID of services. When I use absolute positioning, the former ends up overlapping the latter. The services div transitions to display information when hovered over du ...

htmlcssbootstrap-4

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

I am working on a project that involves an HTML section where a user can choose a billing term from a drop-down list. I am in the process of writing JavaScript code to capture the selected option value and use it in another part of the webpage. Here is a ...

javascriptjqueryhtmlcssselect

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

javascriptphpjqueryhtmlcss

Retrieving CSS properties of an element using JavaScript

How can I efficiently retrieve all CSS rules associated with a specific element using JavaScript? I am not seeking a particular solution, just looking to capture all CSS rules for the given element. For example, consider the following HTML code: <div ...

javascriptjqueryhtmlcss

Ways to modify the background images in doxygen

Currently, I am facing a challenge while customizing Doxygen's output and my main roadblock is the menu bar. To address this issue, I decided to generate custom CSS and HTML files provided by Doxygen by executing the command: doxygen -w html header. ...

htmlcssdocumentationdoxygen

Default Bootstrap Navbar Collapse Setting in Rails

Following the update of bootstrap rubygem from 4.0.0.alpha6 to 4.0.0.beta, I noticed that the default behavior of the navbar has changed. The links within it are now hidden behind the button, even on full screen. <nav class="navbar navbar-toggleable-md ...

ruby-on-railsrubygemsbootstrap-4

Flexible columns with dynamic maximum width based on percentage

After extensive research, I am turning to stackoverflow for help with a seemingly simple task that has proven difficult to achieve. I have three columns of expandable content and need them to adjust in size proportionally when one or more are expanded. Eac ...

htmlcssmultiple-columnscalculated-columns