Utilize Bootstrap to expand a row with 24 responsive columns and fill the remaining vertical space

Hello everyone! This is my first time posting a question here, even though I've been relying on this site for solutions for several years now.

I've encountered a "multi-row" issue that seems to be unique and hasn't been covered yet. Despite searching extensively, I haven't come across a suitable solution for it.

My problem revolves around a CSS/HTML layout using Bootstrap 5.3. I have two rows that need to span the entire container, almost covering the entire viewport. The first row grows using 

flex-grow: 1!important; min-height: 0; overflow: hidden;
, which works well on wider screens. However, on smaller screens, I end up stretching the content across 24 columns within two displayed "subrows". As a result, the lower "subrow" becomes overly long as it still calculates its height based on the whole row's height.

Here's a simplified version of my code - please view the result in full window mode to avoid any messy display:

#root {
    height: 100vh;
    padding: .25rem;
}
.growing-row-overflow-hidden {
    flex-grow: 1!important;
    min-height: 0;
    overflow: hidden;
}
.pianoroll {
    overflow: hidden;
    display: inline-block;
}
.notYetReady {
    opacity: .5;
    pointer-events: none;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120f120c115d504c545d0d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="root">
<div class="container-md text-center border h-100">
    <div class="App h-100 d-flex flex-column">
        <div class="row growing-row-overflow-hidden">
            <div class="col-12 col-sm-6">
                <div class="row h-100">
                    <div class="col-4 col-sm-12 flex-grow-1 list-group p-2 ">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Record</div>
                        <div class="list-group-item h-100"><button
                                class="btn btn-outline-success w-100 h-100">Start</button></div>
                    </div>
                    <div class="col-4 col-sm-12 flex-grow-1 list-group p-2 notYetReady">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Stop</div>
                        <div class="list-group-item h-100"><button
                                class="btn btn-outline-warning w-100 h-100">Stop</button></div>
                    </div>
                    <div class="col-4 col-sm-12 flex-grow-1 list-group p-2 ">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Save</div>
                        <div class="list-group-item h-100"><button
                                class="btn btn-outline-primary w-100 h-100">Save</button></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 list-group p-2 h-100 ">
                <div class="list-group-item list-group-item-secondary text-uppercase">Your Pitch</div>
                <div class="list-group-item h-100 overflow-auto">
                    <div class="pianoroll">
                        <div style="height: 2000px; background-color: red">A lot of content...</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col list-group list-group-horizontal p-2">
                <div class="list-group-item list-group-item-secondary text-uppercase">Sensitivity</div>
                <div class="list-group-item w-100 d-flex"><span class="flex-fill"><input type="range"
                            class="form-range liveSensitivitySlider" style="--inputRMS:0%;"></span></div>
                <div class="list-group-item"><button class="btn btn-outline-primary w-100 h-100">Settings</button></div>
            </div>
        </div>
    </div>
</div>
</div>

If anyone has alternative suggestions on how to achieve this layout effectively, I'd appreciate the help. My goal is to have both rows fill the entire screen - whether it's in three displayed rows on small screens or two displayed rows on larger screens.

Your assistance would mean a lot to me!

Thank you,

Walle

cssflexboxbootstrap-5

Answer №1

After tackling this challenge head-on, I successfully resolved it by utilizing a dynamic CSS grid. For those encountering a similar issue, my advice is to avoid using rows as they may not be suitable for the task of filling the remaining vertical space precisely, especially when dealing with columns that span multiple lines and contain substantial content. I made some minor adjustments to the button layout by introducing additional classes but nothing major.

This represents my solution:

#container {
    height: 100vh;
    padding: .25rem;
}
.grid-container {
    display: grid;
    grid: auto 1fr auto / 1fr 1fr;
    width: 100%;
    height: 100%;
}
.grid-left-or-top {
    grid-area: 1 / 1 / 2 / 3;
    overflow: auto;
}
.grid-right-or-bottom {
    grid-area: 2 / 1 / 3 / 3;
    overflow: auto;
}
.grid-footer {
    grid-area: 3 / 1 / 3 / 3;
}
@media (min-width: 768px) {
    .grid-left-or-top {
        grid-area: 1 / 1 / 3 / 2;
    }
    .grid-right-or-bottom {
        grid-area: 1 / 2 / 3 / 3;
    }
    .list-group-vertical-md {
        flex-direction: column!important;
    }
    .list-group-vertical-md>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: 0!important;
        border-top-right-radius: var(--bs-list-group-border-radius)!important;
    }
    .list-group-vertical-md>.list-group-item+.list-group-item {
        border-top-width: 0!important;
        border-left-width: var(--bs-list-group-border-width)!important;
    }
    .list-group-vertical-md>.list-group-item:last-child:not(:first-child) {
        border-top-right-radius: 0!important;
        border-bottom-left-radius: var(--bs-list-group-border-radius)!important;
    }
}
.pianoroll {
    overflow: hidden;
    display: inline-block;
}
.notReadyYet {
    opacity: .5;
    pointer-events: none;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="264449495255525447566613081508160b474a564e4717">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
    <div class="container-md text-center border h-100">
        <div class="App h-100 grid-container">
            <div class="grid-left-or-top">
                <div class="h-100 w-100">
                    <div class="h-100 w-100 list-group list-group-horizontal list-group-vertical-md p-2 ">
                        <div class="list-group-item list-group-item-secondary group-header">Record</div>
                        <div class="list-group-item flex-fill"><button
                                class="btn btn-outline-success w-100 h-100">Start</button></div>
                        <div class="list-group-item flex-fill"><button
                                class="btn btn-outline-warning w-100 h-100">Stop</button></div>
                        <div class="list-group-item flex-fill"><button
                                class="btn btn-outline-primary w-100 h-100">Save</button></div>
                    </div>
                </div>
            </div>
            <div class="grid-right-or-bottom">
                <div class="list-group p-2 h-100 w-100 ">
                    <div class="list-group-item list-group-item-secondary group-header">Your Pitch</div>
                    <div class="list-group-item h-100 overflow-auto">
                        <div class="pianoroll">
                            <div style="height: 2000px; background-color: red">A lot of content...</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-footer">
                <div class="col list-group list-group-horizontal p-2">
                    <div class="list-group-item list-group-item-secondary group-header">Sensitivity</div>
                    <div class="list-group-item w-100 d-flex"><span class="flex-fill"><input type="range" min="-50"
                                max="0" step="1" class="form-range liveSensitivitySlider" value="-40"
                                style="--inputRMS:0%;"></span></div>
                    <div class="list-group-item"><button class="btn btn-outline-warning w-100 h-100">Settings</button>
                    </div>
                </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

Incorporating a CSS Module into a conditional statement

Consider the following HTML structure <div className={ `${style.cell} ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/> Along with the associated CSS styles .cell { ...

cssreactjstypescript

What exactly are <hover-sprite> elements in HTML and how can they be maximized for effectiveness?

I've been captivated by the dynamic images on the remix 3D site showcased here: Upon hovering over the image catalog, the photos come to life with movement. I'm eager to recreate this effect but am facing some challenges. Upon inspecting the el ...

htmlcss3d

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs

What could be the reason for the malfunction of this bootstrap drop down menu?

I have tried numerous solutions to make the dropdown items appear on my webpage, but nothing seems to be working. I've added the following code snippet in the head section: <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquer ...

bootstrap-5

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

I have a sliding panel on my webpage that reveals the navigation (www.helloarchie.blue). I want the content inside the panel to fade in slowly when it slides out, and then fade out when the user clicks the icon to close the panel. How can I achieve this ef ...

jqueryhtmlcssfadeinfadeout

With the addition of a key element in the opening statement

Take a look at this code snippet: <div class="content"> This is some title<br/> Some text<br/> And maybe more text. </div> I am trying to wrap the first sentence with a <span> tag before the <br/> element, like s ...

jquerycss

You can utilize the Toggle Button to alternate between multiple classes, not just two

Currently, I am learning Java with Spring Boot and Thymeleaf. While creating some views, I faced a challenge. Initially, I wanted to create a toggle button for "Pending" and "Received". However, now I am attempting to add the option "Cancelled", but I have ...

javascriptcssbootstrap-4

The ASP Classic site is not displaying the expected styles on its elements

Currently, I am revamping an ASP Classic website. The entire site relies on a major CSS file named Main which houses all the styles used. In this file, there are not many styles as the current design is quite basic. Some elements on certain pages have thei ...

htmlcssasp-classic

Nested tables with repeated data using AngularJS' ng-repeat functionality

As a newcomer to angularjs and web-development, I am facing a challenge with using ng-repeat to display data in a complex table structure, like this: A B C D abc pqr xyz std Here is the code snippet: <div class="table-responsive"> ...

javascriptcssangularjshtml

Creating a mobile-responsive table using Bootstrap

I am struggling to make my bootstrap table more mobile-friendly. Despite trying various methods, I have not been satisfied with the results. I am interested in how others are successfully adapting their tables to look good on mobile devices while maintaini ...

jquerycsstwitter-bootstrapmobile

When the screen shrinks, the navbar toggler disappears and blends in with the background

My toggle button is designed to work only for xs screens, where all the navigation links go to the toggle. However, when I click on the toggle button, it initially displays with a white background and then suddenly collapses to the size of the navbar, caus ...

htmlcsstwitter-bootstrapbootstrap-4

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

javascriptjqueryhtmlcss

Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array. <div class="singlePost" *ngFor="let post of da ...

javascriptcssangularionic2ionic3

Is the embedded audio player not showing up on the screen?

I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...

htmlcssembed

My custom font is not compatible with the browser on my asp.net site

I'm having trouble embedding my own font in my .aspx file. Google Chrome and Firefox don't seem to support the font, while IE does. Can someone please provide guidance on how to successfully embed the font in an asp.net page? Below is my code: ...

javascripthtmlcssasp.netfonts

Styling web pages with HTML and CSS directly from a MySQL

I'm facing a challenge in crafting a solution for a intricate issue. My project involves building a website that generates HTML templates containing both CSS and HTML files. Users will have the ability to create multiple templates/sites. In an effort ...

phpmysqlhtmlcssparsing

Adjusting CSS to switch up the color scheme

Is there a way to allow users to change the background color of pull quotes by using the input type="color tag within a form element? Below is my current HTML structure: <form action="change.php" method="post"> name: <input type="text"> ...

javascriptphpjqueryhtmlcss

CSS - Radio buttons featuring closely spaced circular options

I am attempting to create small circles that act like radio buttons without any spacing between them. I was successful in achieving this, but I ran into issues with removing the space between the circles. The margin between two circles should be limited to ...

htmlcss

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

The functionality of the button in my script is limited to a single use

Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...

javascripthtmlcss