Set Bootstrap column size to match a particular column

I am currently using BootStrap 4 and I am attempting to make a column's height equal to another column. Below is the code snippet I am working with:

<div class="container" style="overflow:hidden">
    <div class="row" style="overflow:hidden">
        <div class="col-md-8" id="firstColumn">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
            <div class="row">
                <div class="col-md">
                </div>
            </div>
        </div>
        <div class="col-md-4" id="secondColumn" style="overflow:auto">
        </div>
    </div>
</div>

Currently, my secondColumn has a higher height than firstColumn. My goal is to have both columns be the same height while keeping the second one scrollable.

It is important to note that these columns are within a modal. When a user clicks a button, data from the database is loaded into the modal. Due to this dynamic loading, setting their heights to be equal on page load does not achieve the desired result.

htmlcssbootstrap-4

Answer №1

One effective solution is to utilize the resize jQuery event in order to compare the heights of two divs and set the height of the shorter one to match that of the taller.

You can implement something similar to this:

$(window).resize(function() {
    var firstHeight = $("#firstContainer").height();
    var secondHeight = $("#secondContainer").height();
    if (firstHeight > secondHeight) {
        $("#secondContainer").height(firstHeight);
    } else {
        $("#firstContainer").height(secondHeight);
    }
}

It would be beneficial to have this functionality execute upon page load as well, by creating a named function that can be called in both the ready and resize events.

Answer №2

Utilize Flexboxes!

.wrapper {
  display: flex;
  flex-direction: row;
  border: 5px solid yellow;
}

.colA {
  background-color: #EAE;
  flex: 1 0 auto;
  line-height: 2em;
}

.colB {
  background-color: #AEE;
  flex: 1 0 auto;
  max-height: 70px;
  overflow-y: scroll;
  line-height: 2em;
}
<div class="wrapper">
  <div class="colA">
    Single Line
  </div>
  <div class="colB">
    Multiple<br/>
    lines!
  </div>
</div>

Alternatively, use Bootstrap 4 - Bootstrap 4 provides native support for this. row-eq-height

.wrapper {
  border: 5px solid yellow;
}

.colA {
  background-color: #EAE;
  line-height: 2em;
}

.colB {
  background-color: #AEE;
  max-height: 70px;
  overflow-y: scroll;
  line-height: 2em;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<div class="wrapper row row-eq-height">
  <div class="colA col-6">
   Single Line
  </div>
  <div class="colB col-6">
    Multiple<br/>
    lines!
  </div>
</div>

Edit: added scroll functionality to colB To enable scrolling in a column, set the height or max-height and specify overflow as demonstrated in the examples.

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

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

htmlcssfreemarker

What could be causing my CSS/Layout to alter once AJAX/JavaScript has been executed?

When the user clicks, an AJAX call is made to retrieve data from a third-party API. The frontend/layout renders correctly before this action; however, after the data is fetched and displayed in the frontend, the layout changes. Upon debugging multiple tim ...

javascriptjqueryhtmlcss

Customizing the default font color in Angular Material

I am currently navigating through theming in Angular Material and feeling a bit disoriented. I have implemented the prebuilt indigo-pink theme by importing it into my styles.scss as shown below: @import "~@angular/material/prebuilt-themes/indigo-pink.css" ...

cssangularangular-materialangular-material-theming

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

css

If the element is checked and equal to a specific value, take action

I am trying to hide one of the 3 radio buttons on my page. Although they all have the same class, each button has a different value. I attempted to write code to achieve this, but unfortunately, it is hiding all radio buttons instead of just one. Could s ...

javascriptjqueryhtmlcss

What is preventing me from being able to reposition certain tables on my site?

I have successfully implemented certain aspects of my responsive website, but I am encountering some difficulties in moving specific tables. I can adjust the table in various directions, except for moving it downwards. Even when adding the word !important ...

htmlcss

Exploring carousel elements in Selenium using Python

As a user of Selenium, I am trying to loop through the games displayed in the carousel on gog.com and print out all the prices. Below are two random XPaths that lead to the information within the carousel: /html/body/div[2]/div/div[3]/div/div[3]/div[2]/di ...

pythonhtmlseleniumxpath

Java Applet for capturing specific sections of a webpage to create a screenshot

Does anyone know of a way (applet or something else) to capture a screenshot of the content within a specific div on a webpage? I came across this Java code for capturing a screenshot of the entire screen: import java.awt.AWTException; import java.awt.Re ...

javajqueryhtmlwebapplet

What is the proper way to connect an external Javascript file to an html document within a Play Framework project?

Below is the content of my scala.html file: @() <!DOCTYPE html> <html> <head> <title> Spin To Win </title> <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/styles.css")" ...

javascripthtmlscalaplayframework

Sending information to the styles feature in Angular 2

Is there a way to transfer data from an Angular tag to the styles in the @Component? Take a look at my component: import { Component, Input } from '@angular/core'; @Component({ selector: 'icon', template: `<svg class="icon"> ...

cssangular

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

I am currently working on a corporate website and have been tasked with creating a unique design for a specific page. The design includes the following elements: A body background gradient that transitions from their primary color to white in a top-to-bot ...

javascriptjqueryhtmlcss

My image is being cropped on larger screens due to the background-size: cover property

I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...

cssbackground-image

Changing the color of text in one div by hovering over a child div will not affect the

When hovering over the child div with class .box-container, the color of another child div with class .carousel-buttons does not change. .carousel-slide { position: relative; width: inherit; .carousel-buttons { position: absolute; z-index: ...

htmlcsssass

Achieving Perfect Alignment in Website Layout using CSS and HTML

I have a customized CSS layout that was made for me, but I am no longer in contact with the original creator. I wanted to increase the size of a specific div (#rightcolumn) by 55px. To achieve this, I resized the iframe within the div and it automatically ...

htmlcss

What steps can be taken to ensure the CSS/HTML image aspect ratio remains consistent on various monitors?

My square-shaped image (1:1 aspect ratio) is displaying differently across various devices when I use the codes below. While some show it as a perfect square, others display it as a rectangle. Is there a solution to maintain the original aspect ratio consi ...

htmlcss

Achieving auto-height for two elements with CSS within a single block

I am attempting to combine two blocks into one fixed-height block in order to achieve the following design: ------------------------ UL (starts with height=0), expands when elements are added until maximum height is reached scroll bar should appear aft ...

csshtml

PHP: implementing several forms on a single webpage

In my current situation, I need to display forms that resemble an Excel sheet with a submit button next to each row. When the submit button is clicked, the data is saved for that specific row, the row is disabled, and the focus automatically moves to the n ...

phpjqueryhtmlmysqlforms

Press the button to duplicate the cell column separated by commas

In my HTML table, there is a specific column filled with container numbers that I want to copy to the clipboard when a button is clicked. The column has the class ".container" Here is the code I have been working on. HTML: <button onclick="copyToC ...

javascripthtmljquery

Ensuring my form adjusts effortlessly to the sprites

I need assistance in making my contact form responsive to match the eagle sprite on this specific webpage: The goal is to ensure that as the screen size changes, the eagle's mouth aligns perfectly with the form. While the sprites and form are both re ...

htmlcss

Positioning the div to align perfectly alongside the list items

My current objective involves dynamically creating div elements and populating them with items. A working demo of my progress can be found by following this link. The issue at hand is that the newly created div does not appear in the desired location, but ...

javascriptjqueryhtmlcss