Achieving scrollable tab content in Bootstrap 4.1 with flex: A simple guide

I have a similar query to the one discussed in this thread, but my goal is to utilize bootstrap's flex feature for achieving a "dynamic" height for the tab-content. The code snippet below results in a scrollbar encompassing the entire page, whereas I specifically desire the content within the tab-pane to be scrollable (internal scrollbar).

Edit II: The tab-content should occupy the remaining available space. Initially, I assumed that applying flex-grow-1 to the tab-content alongside h-100 on the tab-pane would yield the desired outcome. However, this approach did not materialize as expected.

I appreciate any guidance or recommendations provided.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
            crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
            crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-row" style="min-height: 100vh; max-height: 100vh;">
    <div class="d-flex flex-column flex-grow-1">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist"𔉄
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                   aria-controls="nav-home" aria-selected="true">Home</a>

            </div>
        </nav>
        <div class="tab-content flex-grow-1" id="nav-tabContent">
            <div class="tab-pane fade show active d-flex flex-column h-100" id="nav-home" role="tabpanel"
                 aria-labelledby="nav-home-tab">
                <div class="flex-grow-1" style="overflow-y: scroll">
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan
                        farm-to-table
                        Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,
                        cliche American
                        Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade.
                        Wayfarers codeply
                        PBR
                        selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO
                        Pitchfork
                        fixie
                        iPhone fanny pack art party Portland.
                        Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-freelt;
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

htmlcssbootstrap-4

Answer №1

Check out my solution below by adding the following code snippet to your CSS file. Hopefully, this will address your issue. If you encounter any further challenges, please don't hesitate to reach out for assistance.

.tab-content {
  height: 90vh;
}

This adjustment allows the tab content to occupy the remaining space after allocating 10% of the screen height to the header. Hence, you're left with 90% for the content area.

Answer №2

I successfully implemented this feature for Bootstrap 5 using the guideline/example found on how to scroll content of flex row that is flex-grow-1. When there's lengthy content in a tab pane, it triggers a vertical scrollbar while keeping the navigation bar fixed.

To adapt this functionality for Bootstrap 4, simply replace g-0 with no-gutters.

<body class="container-fluid p-0">
<div class="col d-flex flex-column vh-100 pb-3 px-3">

    <div class="row g-0">
        <ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-status-tab" data-bs-toggle="pill" data-bs-target="#pills-status" type="button" role="tab" aria-controls="pills-status" aria-selected="true">Status</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-flights-tab" data-bs-toggle="pill" data-bs-target="#pills-flights" type="button" role="tab" aria-controls="pills-flights" aria-selected="false">Flights</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-log-tab" data-bs-toggle="pill" data-bs-target="#pills-log" type="button" role="tab" aria-controls="pills-log" aria-selected="false">Log</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings" type="button" role="tab" aria-controls="pills-settings" aria-selected="false" disabled>Settings</button>
            </li>
        </ul>
    </div>

    <div class="row g-0 flex-grow-1 overflow-auto">
        <div class="tab-content flex-grow-1 overflow-auto" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-status" role="tabpanel" aria-labelledby="pills-status-tab" tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-flights" role="tabpanel" aria-labelledby="pills-flights-tab" tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-log" role="tabpanel" aria-labelledby="pills-log-tab" tabindex="0">
                <div id="log-entry"></div>
            </div>
            <div class="tab-pane fade" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab" tabindex="0">...</div>
        </div>
    </div>

</div>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

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

What could be the reason for JavaScript delaying the execution of DOM statements until a variable is true?

Today I've been tackling numerous bugs, but there's one particularly tricky bug that has me stumped. The snippet of code below pertains to a basic logon page. Currently, the only valid username is 'admin' and the corresponding password ...

javascripthtmldom

What is the best way to style my text fields in Django using Bootstrap?

In my form class, I have lines that look like this: class ReportForm(forms.ModelForm): diagnosis = forms.CharField(widget=forms.Textarea(attrs={'cols': 200, 'rows': 3})) class Meta: model = Report Then, when I render the form ...

htmldjangotwitter-bootstrap

A meteorological anomaly occurred during the execution of an asynchronous function, resulting in an exception in the

Encountered Problem: I am attempting to update a collection in the onAfterAction hook within a route using the code below (where 'pages' is the name of the collection): var document = pages.findOne({page: "stats"})._id; console.log(document); va ...

javascripthtmlmongodbmeteormeteor-blaze

Error encountered: popper.js throwing an unexpected token export SyntaxError

Error in Angular: When using popper.js with bootstrap 4, I'm encountering a SyntaxError with Unexpected token export. The error is showing up in the browser console. I tried changing the reference location for popper.min.js but it didn't work. ...

javascriptangularbootstrap-4popper.jsangular7

The header will not display the text

I can't seem to get the href buttons to align properly in the header. I tried adjusting the margin-top, but it didn't work as expected. Being a beginner in CSS, I'm unsure of what code to use next. Any help would be greatly appreciated. Als ...

htmlcssbuttonheaderhref

Is there a way to determine the number of options required for a select tag to become scrollable?

Please review these two <select> elements: <select> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option&g ...

javascriptjqueryhtmlcss

Binding data to an MVC grid component

I am working with asp.net mvc3.0 razor framework and using an html Table to populate data from ViewBag based on the selected option in a dropdownlist. public ActionResult Index(GetFileName fn) { .... ViewBag.Grid1Data = dt; return View(); } Initially, th ...

javascriptasp.nethtmlasp.net-mvc-3

The appearance of dotted points changes when they are printed on paper

Check out this customized printable application form that allows users to easily input their information and print it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Custom Printout</title> ...

htmlcss

Unraveling the Enigma of CSS Grid Whitespace

I'm facing an issue while trying to construct a grid of images using CSS Grid. Interestingly, I am encountering mysterious white space around the first two items in the grid. Upon inspecting the images, I am unable to identify any source of this white ...

htmlcssgoogle-chromecss-grid

Styling elements with CSS to achieve proper positioning

I am in search of a way to align rows utilizing the style property. The following HTML code is being transformed using XSL: <span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40 : item1</span>&l ...

htmlcss

What's the best way to show black text for progress between 0-40% and white for progress between 60-100%?

As a beginner, I humbly ask for your forgiveness. My goal is to show progress percentages in black and white based on the progress state. Despite my attempts with if statements and creating new classes for black and white progress states, I have not been s ...

htmltypescriptvue.jssass

The use of script src with vue.js is causing issues

I am looking to move my Vue code into an external .js file. Since I am new to Vue, I am trying to keep it simple without using webpack. However, I have encountered an issue where Vue does not work when using the script src tag in the html file. For instanc ...

javascripthtmlvue.js

Modify the appearance of a specific <td> element using JavaScript to change its color

I am working on creating a quiz using HTML, displayed in a table format. Upon verification, I want to highlight the correct choice (which is represented by a <td> tag) in green, and the incorrect choice in red using the background property. Is there ...

javascripthtml

Enhancing django signup form with personalized helper texts using widget_tweaks

I am running into an issue with the helper text for the Password field on my signup page using Django's default signup form. Despite my efforts, I can't seem to resolve it. Below is the body of my signup.html: <body class="text-center"> ...

htmlcssdjangodjango-widget-tweaks

Embedding CSS directly into PHP output

I have a table where I want to include a vertical-align property: $output = '<style type="text/css">div.bar-container {border: 1px solid #ccc; width: 150px; margin: 2px 5px 2px 17px; padding: 3px; float: left; background: white; position:relati ...

htmlcss

What is the best way to extract content between <span> and the following <p> tag?

I am currently working on scraping information from a webpage using Selenium. I am looking to extract the id value (text) from the <span id='text'> tag, as well as extract the <p> element within the same div. This is what my attempt ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Imagine a scenario where I have a page located at: www.mydomain.com When a user clicks on a button, it triggers the opening of a new window using: newWin = window.open("https://www.otherdomain.com","a","height=800,width=1000"); Now, my objective is to m ...

javascriptjqueryhtmldomwindow

Unable to achieve proper centering and bottom vertical alignment for div element using CSS and HTML codes

I am facing an issue with centering and vertically aligning a div inside another div. Despite setting the CSS properties, it doesn't seem to work properly. Can you please review my code below: #outer { border: 1px solid black; height: 500px; } #in ...

htmlcss

Difficulty encountered with changing font color on CSS

I'm having trouble fixing the text color, it's currently white and blending in with the background. I've set the color to #1a6eb6 for both the TEXT element and the submenu list items, but it's not working. Can someone assist me with thi ...

htmlcsscss3pie

Is it possible to nest a <div> element inside a table in HTML code?

I am facing a requirement where I need the table rows inside a table, excluding the head row, to be scrollable. I attempted the following code, but it did not produce the desired outcome: <table id="applicantList1" border="1" align="left"> &l ...

htmlhtml-table