Fixed header position in bootstrap 3 modal
Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.
You can easily do this using the CSS3 vh unit together with calc. Both vh as calc have pretty good browser support (IE9+).
The vh unit is relative to the viewport (= browser window) height. 1 vh is 1% of the height and 100vh means 100% of the viewport height.
We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.
Set either the height or max-height to calc(100vh - header+footer px).
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
See the jsfiddle
Is it possible to have a fixed header inside a long modal with no scrollbars or fixed height on the modal?
This is your CSS rule that needs a change:
.modal .modal-body {
height: 500px;
overflow: auto;
}
Remove the height:500px; and the modal will expand taller than the viewport giving its scrollbar to the <body> element.
Update: For a fixed header you can move the .modal-header element that is inside .modal-content to be just before .modal-dialogue. Then add padding-top: 60px; to the rule above and add the following rule for the header (Demo):
.modal-header {
position: fixed;
top: 0;
left: 0;
right: 17px;
z-index: 10;
background: white;
}
Twitter Bootstrap modal opening/closing causes fixed header to jump
I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping.
This might not be the best solution but for now it works just fine.
Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops
<script>
$(document).ready(function(){
// Dirty fix for jumping scrollbar when modal opens
$('#requestModal').on('show.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","15px");
}
});
$('#requestModal').on('hide.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","0px");
}
});
});
</script>
If you know a better solution (preferably CSS3 only), please let me know.
Thanks for all the help!
Div with fixed position in a scrollable modal
I managed to resolve the issue based on answers by @Shiplo Rahman and @Dejan.S
Removed the modal-header, put everything in modal-body and doing a jquery workaround described here: jQuery: Fix div when browser scrolls to it
$('.launchConfirm').on('click', function (e) {
$('#confirm').modal({
show: true
});
});
jQuery(function($) {
function fixDiv() {
var $cache = $('#getFixed');
if ($('.modal-body').scrollTop() > 50)
{
$cache.css({
'position': 'fixed',
'top': '0px',
'left': '25px',
'width': '600px'
});
}
else
$cache.css({
'position': 'relative',
'top': 'auto',
'left': '10px'
});
}
$('.modal-body').scroll(fixDiv);
fixDiv();
}); @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
//overflow: hidden;
}
.modal-body {
height: calc(100vh - 126px);
overflow-y: scroll;
}
#getFixed {
position: relative;
left: 10px;
width: 600px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
<div class="container">
<br />
<button type="button" class="btn launchConfirm">Open modal</button>
</div>
</div>
<div class="modal fade" id="confirm">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirm2">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
<div id="getFixed" style="background-color:red">This div should be fixed<br>and should not scroll away.</div>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
</div>
<div class="modal-footer">
some random buttons
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->Modal dialog with fixed header and footer and scrollable content
You can try max-height using calc() function, like:
.modal-content {
height: auto !important;
max-height: calc(100vh - 340px) !important;
}
Have a look at the snippet below (use full screen):
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});.modal {
overflow: hidden;
}
.modal-header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.modal-header h4 {
margin: 0;
}
.modal-content {
height: auto !important;
max-height: calc(100vh - 340px) !important;
}
.content-row {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.content-row:last-child {
border-bottom: none;
}
.icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #33b5e5;
color: #fff;
}
.name {
padding: 0 10px;
}
.role {
padding: 0 10px;
flex: 1;
text-align: right;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/>
<!-- Modal Trigger -->
<a class="modal-trigger waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-header">
<h4>Modal Header</h4>
</div>
<div class="modal-content">
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
<div class="content-row">
<div class="icon">1</div>
<div class="name">Name</div>
<div class="role">Role</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>Bootstrap modal won't display if the position of its parent container set to fixed
Most Simple solution. Just put your modal out side of your container div as I have done below.
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Reference for the above is here
.container {
position: fixed;
right: 0;
top: 0;
}<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">instruction</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>DIV for modal display that has fixed header and footer, scrollable content, and no fixed pixel values for content height
I think you need a
position : absolute;
instead of fixed for your header and your footer.
Fixed is relative to the screen, when absolute and relative are actually dependent on the last layer with a non-static position.
A fiddle would be appreciated.
EDIT: Does that fiddle look more like what you expected ?
So it seems like the position: absolute suited your needs for the position of the header and the footer.
So you just needed to do the same for the body to position it perfectly. But then you face a new problem. You wanted your header and footer to have a fixed size, but want the body to fill the 'rest'.
I cannot possibly think of a solution to do that, except by giving to the header and footer a height in percentage. That's what I did in my fiddle.
So that's the best I could find.
All three elements are absolutely positioned, the header positioned with a top: 0;, the body with the top: 10%; instruction, and the footer with a bottom: 0;.
Related Topics
Concatenate Values in Less (Css) Without a Space
Why Do I Have to Put Media Queries at the Bottom of the Stylesheet
Ie11 Border Radius and Border Bug
Applying CSS File to Javafx Webview
How to Keep Aspect Ratio of a Background-Image
Why Shouldn't I Use Id Selectors in CSS
How to Change the Border/Outline Color for Input and Textarea Elements in Twitter Bootstrap
How to Use CSS to Replace or Change Text
CSS Media Type: How to Load CSS for Mobile
Can You Add Line Breaks to the :After Pseudo Element
IE7 CSS Inheritance Does Not Work
Css, Background-Repeat Distance
Less CSS Pass Mixin as a Parameter to Another Mixin
How to Draw a Partial Circle Outline in CSS (Open Ring Shape)
How to Adjust the Caret (Blinking Cursor) Size Inside Searchbar with CSS