Using the CSS overflow scroll property with Bootstrap

I am attempting to resize Section A in Column 1 to match the height of the row.

1 row, 2 columns:

+---------------------+---------------------+
|      Column 1       |      Column 2       |
|                     |                     |
| +-----------------+ | +-----------------+ |
| |      Button     | | | Section B       | |
| +-----------------+ | | Expand/collapse | |
|                     | +-----------------+ |
| +-----------------+ |                     |
| | Section A       | | +-----------------+ |
| |                 | | | Section C       | |
| | Expands to      | | |                 | |
| | height of 2nd   | | |                 | |
| | Column 2,       | | |                 | |
| | inner contents  | | |                 | |
| | scroll          | | |                 | |
+ +-----------------+ | +-----------------+ | 
+---------------------+---------------------+

The "Button" adds text to Section A.

Section A should extend its height and allow scrolling for overflow content.

Section B is a collapsible panel.

Section C is also created.

The height of Column 2 dictates the height of Column 1.

A fiddle speaks louder than words: https://jsfiddle.net/gnp47bLf/3/

I have attempted setting the height to 100%, but it was unsuccessful. Click on the generate button to load text dynamically. Unsure if CSS flex property is the solution or how to use it. Bootstrap4 latest beta version is being utilized.

cssbootstrap-4

Answer №1

When facing layout challenges, the use of flexbox utility classes can be extremely helpful.

In order to achieve the desired design where the .tab-pane and .results-wrapper extend to the bottom of the main row, certain classes like .d-flex were added to .card-body and .h-100 to .tab-pane. Additionally, applying .d-flex .flex-column on .tab-pane allows the .results-wrapper to also reach the bottom of the row by being its direct child.

$().ready(function() {
    $('#generate').click(function() {
        html = '<ul>';
        for (let i = 0; i < 100; i++) {
            html += `<li>${i}</li>`;
        }
        html += '</ul>'
        $('#myText').html(html);
    })
});
.results-wrapper {
    overflow-y: scroll;
}
<div class="container-fluid">
    <div class="row border border-warn">

        <div class="col border border-success">
            <div class="card text-center h-100">
                <div class="card-header">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">TAB A</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">TAB B</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body d-flex">
                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane h-100 fade show active d-flex flex-column" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="row">
                                <div class="col">
                                    <button class="btn btn-sm btn-primary" id="generate">Generate</button>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                To ensure the grey area stretches vertically based on the row's height without specifying a fixed pixel value, click the "Information" link for more details.
                                </div>
                            </div>

                            <div class="col results-wrapper">
                                <div class="col-12 results bg-secondary" id="myText">
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            Hi
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col border border-info">
            <div class="row" id="divItemInfo">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <a class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            <i class="fa" aria-hidden="true"></i>
                            <span id="div_current_item_information_header">Information</span>
                            </a>
                        </div>

                        <div class="card-body collapse" id="collapseExample">
                            <div id="div_current_item_information_body">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.                                       
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
                    <br/><br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
                    <br/><br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ...

                </div>
            </div>
        </div>
    </div>

    <div class="row border border-primary">
        <div class="col">
            Another Column
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

Answer №2

This question seems to be more about CSS than Bootstrap. The issue appears to be the fixed height set on .results-wrapper. By removing height: 100px; from that class, the problem should be resolved.

In Bootstrap, there is a class called h-100 that can make a column's height 100%. However, it doesn't seem applicable to this particular situation.

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

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Utilize Bootstrap 4 masonry elements to extend across multiple columns with the help of card-columns

After experimenting with the masonry layout feature of Bootstrap 4 using card-columns, I have come across a query. Can a masonry item span multiple columns instead of being restricted to one column as it currently is? I even created a simple sketch to illu ...

bootstrap-4

What is the method for defining a CSS property for the ::before pseudo element within an Angular component?

Can TypeScript variables be accessed in SCSS code within an Angular component? I am looking to achieve the following: <style type="text/css"> .source-status-{{ event.status.id }}::before { border-left: 20px solid {{ event.status.colo ...

cssangularpseudo-element

Changing the color of an open Bootstrap 4 accordion panel when the page loads

I am looking to emphasize the panel that the user has opened. If a user clicks the button in the card header, the background turns red, which is working smoothly as demonstrated in the code snippet. In certain scenarios, the first panel is open by default ...

javascriptjquerycsstwitter-bootstrapbootstrap-accordion

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Having trouble with using New Line '\n' ' ' in Typescript Here is an example of my typescript code: this.custPartyAddress = estimation.partyName + ',' + '\n' + estimation.partyAddress + ',' + ...

htmltypescriptbootstrap-4newline

What is the method to ensure span elements wrap text without setting a specific width or maximum width on the parent div?

Here is a snippet of code I have generated for displaying warnings or errors in Dojo dialogs: /* Relevant CSS styles */ .l-status-message-wrapper { height: auto; margin-left: 5px; margin-top: 2px; min-height: 15px; } .l-status-message-w ...

htmlcss

Page width incorrectly set leading to unnecessary scrolling

Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work. .container.open-sidebar { position: relative; left: 240px; } #sidebar ...

htmlcss

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

This is the code we are using to style our checkboxes: .checkbox-default { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url('data:image/ ...

csssvg

What could be causing the image file input to appear sideways or flipped?

I am currently working on a Vuejs component that allows users to select a file from their local system. Once the user selects an image, it is previewed in a div. However, I have noticed that some images appear 'flipped' sideways automatically, es ...

javascripthtmlcssvue.jsvuejs2

CSS Challenge: How to crop an image without using its parent container directly

I'm currently facing a complex CSS challenge that I can't seem to solve. I want to create an image controller (two-by-two layout on two lines) that can display: The top-left image in full size, The top-right with horizontal scrolling, The botto ...

javascriptjqueryhtmlcssimage

What are the steps for transforming this code into pure CSS, or incorporating it into a Javascript function?

@function generate-random-box-shadows ($n) $value: '#{random(2000)}px #{random(2000)}px #FFF' @for $i from 2 through $n $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF' @return unquote($value) $random-shadows1 ...

javascriptcsssass

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

The functionality of the disabled and checked options on the radio button seems to be malfunction

Within an Angular HTML document, I have a set of radio buttons that share common names. I am attempting to update their disabled and checked properties from a .ts file, but the changes are not taking effect. Here is the code snippet: let elements = docume ...

htmlcssangular

Enhance your WooCommerce shopping experience by incorporating a variety of personalized checkout fields organized into two distinct

I have implemented custom code to create unique checkout fields based on the number of products in a customer's cart. Each product requires 4 customized checkout fields, displayed in two columns side by side. The expected result is as follows: co ...

phpcsswoocommercecheckoutcustom-fields

CSS must be applied to various sections of an HTML document

For example, I have 2 CSS files. In one CSS file, I have the style: a{color: blue;} In the second file, I have: a{color: red;} I want to apply these styles to my HTML file. <div> <a>first file ...

htmlcss

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

htmlcssanimationsvg

The CSS selector ">" is not functioning correctly, and neither is the "~" selector

I am currently working with the following CSS: .images_container input[type="checkbox"]:checked > label { border-color:#4378c3; opacity:1.0; } .images_container input[type="checkbox"] > label:hover { opacity:1.0; } .images_container input[type="chec ...

htmlcss

What could be causing the CSS height percentage to malfunction?

I'm having trouble with some basic CSS that uses percentages. I've labeled everything and checked my code, but it still isn't working properly. Here's the CSS code snippet: .BoxHeight { height: 100%; } #Box { margin-top: 0%; mar ...

htmlcss

Is it achievable to dynamically modify the style URL in an Angular component based on certain conditions?

element: I am working with two different CSS files, one for Arabic layout and one for English layout. I am wondering if it is possible to conditionally change the style URL in the component. Is this feasible? ...

cssangulartypescript

Eliminate the option to display/hide password icon on Safari

Is there a method to eliminate the show/hide icon in Safari that pops up when entering symbols into an input field with type "password"? I was able to achieve this in IE/Edge by incorporating the following CSS rule: input[type=password]::-ms-reveal, input ...

cssinputsafaripasswordswebkit