While many solutions exist on Stack Overflow for making columns equal height based on the largest content, I am specifically interested in making all columns equal height based on the smallest column.
https://i.sstatic.net/Xlcyh.png
In this scenario, my goal is to have all columns match the height of the middle column, with the content within the larger columns being scrollable. Although I am currently using Bootstrap 4, I am willing to consider alternative approaches.
If you're facing this issue, javascript might be the solution.
// Grab all the columns
const columns = document.querySelectorAll('.column');
// Array to store column heights
var columnHeights = [];
// Gather Column Heights
for(let index=0; index<columns.length; index++) {
let column = columns[index];
columnHeights.push(column.getBoundingClientRect().height);
}
// Find the minimum column height
Array.min = function(heightsArray){
return Math.min.apply( Math, heightsArray );
};
var minimumHeight = Array.min(columnHeights);
// Set the height of remaining columns according to minimum height
columns.forEach(col => {
col.style.height = minimumHeight + 'px';
});
You can view a demo here
I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...
I'm currently working on a solution to extract the ids of dragged divs once they have been placed in the drop zone. Each drag component is assigned an id ranging from drag1 through drag8, while the drop zone is labeled as div drop zone. Since there a ...
When retrieving data from the controller: public Mono<String> getShops(){ ..... model.addAttribute("shops", shops); return Mono.just("shoppage"); } I have a tab with a table in my shoppage.html: <ul class="nav na ...
Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab does ...
I have a webpage with a "read more" option that redirects to the About Us page. When I click on "read more", the About Us page opens at the top, but I want it to redirect to the bottom of the About Us page. How can I achieve this? ...
I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving ...
I am in the process of creating a new website that offers SMS services through clickatell. This website includes various font families that may not be defined on the client's computer. For instance, if the site is accessed from a different computer, t ...
I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...
As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the e ...
I've been attempting to implement a dropdown menu using Bootstrap that displays the selected option when a user clicks on it. However, I'm encountering issues as the breakpoints set within $(document).on("click", ".dropdown-menu li ...
Looking for assistance in moving my navigation buttons to each side of the logo. As a beginner in web design and CSS, I've been struggling with this task. Essentially, I want the "home" and "about" buttons on the left side of the logo, 16px apart from ...
Does max-width set to auto have the same result as setting max-width to 100% If not, what is the distinction between them? ...
I recently experimented with a demo to enhance the performance of tables on my website in development. The demo worked flawlessly on my desktop when I resized using a responsive tester extension for Chrome: https://i.stack.imgur.com/KzFiR.jpg However, u ...
Currently, I am facing an issue with React where I am attempting to place an overlay on top of each grid item in a grid. Despite trying multiple approaches, the overlay appears beneath each grid item instead of over it. Even setting the position: absolute ...
In my JavaScript code, I am dynamically creating a meta viewport. I set the value of this viewport to be 980px using the following script: var customViewPort=document.createElement('meta'); customViewPort.id="viewport"; customViewPort.name = "vie ...
Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I&apo ...
I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...
Is there a way to include a clickable handle in a material ui SwipeableDrawer? Something similar to what's shown on Google Maps here: Google Maps button.css position: absolute; top: 100px; left: -50px; width: 50px; height: 100px; z-index: 10000; // ...
Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite ...
We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...