Currently, I have an element that contains a few columns. The issue is that all columns end up being the same height as the tallest one. What I want is to set a minimum height for one specific column, #colB, and have the other two columns scroll vertically if they surpass the height of #colB.
Is there a way to achieve this using the Bootstrap 4 utilities?
You can find an example js-fiddle here:
If you're comfortable with a fixed height, you can define the height of the row and let the following divs overflow if they exceed that height.
Alternatively, you will need to use JavaScript to compare the heights of each div, choose the shortest one, and then set the height on the row element directly.
.row { height: 50vh; }
One way to dynamically adjust the heights of columns on a webpage is to use either javascript or jQuery during the page load event. By measuring the height of colB, you can then update the heights of both colA and colC accordingly.
If you want to see a live example, you can check out the code on JSFiddle
Alternatively
To implement this solution, simply copy and paste the following code snippet just before the closing </body> tag:
<script>
temp = $('#colB').height();
console.log(temp);
document.getElementById('colA').setAttribute("style","height:"+temp+"px");
document.getElementById('colC').setAttribute("style","height:"+temp+"px");
</script>
I want to outline my goal in detail. I have a setup with 3 pages: index.html, form.html, and result.php. By using jQuery, when the button on index.html is clicked, form.html is loaded inside a div within index.html. Upon submitting form.html, it calls resu ...
Take a look. I'm struggling to get the .menu ul to display properly, it's frustrating! It shows up in ie6, ie8, safari, and ff, but not ie7! I've tried everything. Any suggestions? (I'm almost at xhtml strict validation too). ...
I am facing an issue with a content div that has variable length content arranged horizontally. I want the width of this content div to adjust automatically based on the length of its content. Removing the arbitrary "20%" value from the width property is c ...
I am attempting to gradually fill a canvas with pieces of the original image. To achieve this, I need each square of the image to be filled in iteratively on the canvas. To optimize performance, my approach involves rendering the original image onto an of ...
I am relatively new to ReactJS and I am looking to develop a responsive Carousel. Here is the code snippet that I have currently: To achieve a responsive Carousel for both desktop and mobile devices, I utilized the react-responsive-carousel library. The ...
As a beginner in javascript, I am facing a challenge with a set of checkboxes in an HTML form. These checkboxes are generated dynamically from a python script. Among them, there is a checkbox labeled "N/A" that I want to hide automatically when any other c ...
This code is unique and belongs to me. <html> <head><title>HOME||~All About EDM~</title> </head> <body > <center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center> <c ...
Can you provide guidance on changing the img src (<img src="img/website_building.jpg"...) within a Bootstrap dropdown list based on item selection? Is this functionality achievable? <tr> <td class="bold text-primary"> ...
At the moment, I'm utilizing the animation library found at . Whenever I trigger my confetti animation, the Y Scroll steadily rises until the animation completes. I'm curious if there's a method to cap the y-scroll at a certain height. I wo ...
Let's start with the code: CSS: *{ margin:0; padding:0; } body,html{ height:100%; } body{ background:url('../images/bg.png'); background-position:center; background-repeat:no-repeat; background-attachment:fixed; height:100%; ...
I am currently experimenting with different website animations and implementing responsive design. However, I encountered an issue when trying to apply these changes to my header, which also affects the .heading element. It seems that there is a problem w ...
Looking to display rating stars in a row using repeated images with the inline-block property: <span class="stars" style="width:20px; margin-top:15px;"> <span style="width:40px;"></span> </span> span.stars, span.stars span { ...
Here's the code snippet I've been working with: $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ top: $(this).offset().top - 57, left: -$(this).widt ...
I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...
I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...
I have been trying to showcase a logo (PNG created in Paint.NET) on my website (XHTML 1.0 Transitional), using the following code: <body> <div class="header"> <div class="logo"> <img src="logo.png" /> </div> ...
How can I center two blocks containing both images and text vertically and horizontally while using flexbox? I notice that when the text is longer, padding appears between the image and the text. How can I remove this padding?1 .product-teaser { width ...
li elements are utilized to create breadcrumb in a shopping cart. The breadcrumb displays all anchor elements using the style defined for an 'a' element from site.css. How can I make the last anchor's color black? I attempted the style belo ...
Within my HTML code, I have a select element with options ranging from 1 to 10: <select id="selVal" ng-model="product.quantity" ng-options="o as o for o in quantityValues" ng-change="updateDelta(product.quantity, {{product.quantity}}, product.selec ...
I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...