Bootstrap scrollable tab panel content
Are you looking for the content to scroll within the pane?
Fiddle: http://jsfiddle.net/uxsr66hp/1/
.tab-pane{
height:300px;
overflow-y:scroll;
width:100%;
}
How to get scrollable tab content in bootstrap 4.1 using flex
Here's my solution. Add the following code in your css file. Hope it will be helpful to you. If you face further problem, feel free to inform.
.tab-content {
height: 90vh;
}
It allows your tab content to take the rest of the area. Because your header is taking 10% height of the screen. That's why you have 90% left.
.tab-content { height: 90vh;}<!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-free Kickstarter </p> <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-free Kickstarter </p> <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-free Kickstarter </p> </div> </div> </div> </div></div></body></html>Bootstrap horizontal scrollable tab panel content
Here You go Fiddle: http://jsfiddle.net/51n56p94/
You need to add this css
.tab-pane{
width:1000px;
}
.tab-content{
overflow-x:scroll;
}
Scroll Bootstrap 4 nav-tabs horizontally
Here, You have add your code inside .row. but, would be used .row. when your are use col grid system. Here, You can use following Html structural & css for horizontal scrolled.
.tabbable .nav-tabs { overflow-x: auto; overflow-y:hidden; flex-wrap: nowrap;}.tabbable .nav-tabs .nav-link { white-space: nowrap;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container-fluid"> <nav class="tabbable"> <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> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">My Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> </div> </nav> <div class="tab-content pt-2" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div> </div> </div>Scrolling in Y axis Problem in Bootstrap Tabs
Try adding overflow-y: scroll; on the Tab that you want. It will make the content scrollable on the y-axis.
Related Topics
Is There Any Guide on "When to Use Display:Block When :Inline and When :Inline-Block" and Why
Css: Display: Grid And/Or -Ms-Grid
How to Add/Insert a Before or After Pseudo Element into Chrome's Inspector
CSS - How to Get Rid of the Selection Rectangle After Clicking a Link
How to Create a Light Oval-Shaped CSS3 Shadow
Css: Flex Box Not Printing All Pages on Firefox
Easiest Way to Have a Bootstrap Layout Where the Burger Menu Is Always Visible
Does Z-Index Specify the Stack Level of a Non-Positioned Flex Item
Create a Percentage Circle with CSS
CSS Image Scaling to Fit Within Area Not Distort
How to Not Use <Div Class="Clear"> in Markup
Drawing Animated Arc with Pure CSS
P.Classname or .Classname P, Any Difference
Vertically Aligning Text Next to a Radio Button
How to Make Datalist Arrow to Be Always Visible