How to limit the height of the modal?
Use viewport units with calc
. Like this:
.img-responsive {
max-height: calc(100vh - 225px);
}
...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.
Also, in order to take care of the width of the modal we need to set a few more properties:
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle (Resize the viewport height to see the effect)
Alternatively:
We can replace calc
with a padding + negative margin technique like so:
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
FIDDLE
PS: browser support for viewport units is very good
Bootstrap modal height as per window height
If you want the modal to consume 90% of the viewport height, you don't need any JS. CSS has a special unit for that called vh
. 100vh
is 100% of the viewport.
In your case, you'll just need:
.modal {
height: 90vh;
}
You can also change it to max-height
if necessary.
set max-height for my modal window based on the current screen window size
How about $("#myModalContent).css("max-height", screen.height * .80);
That might work
how can i increase bootstrap modal height
The .modal-content
block is inside the .modal-dialog
block. Hence, tell the child to be of the same height as the parent. Try:
.modal-dialog {
height: 90%; /* = 90% of the .modal-backdrop block = %90 of the screen */
}
.modal-content {
height: 100%; /* = 100% of the .modal-dialog block */
}
Check:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.modal-tall .modal-dialog { height: 90%;}.modal-tall .modal-content { height: 100%;}
/* fix SO stick navigation ;) */@media (min-width: 768px) { body { padding-top: 75px; } }
<div class="container"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalDefault"> Default modal </button>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#modalTall"> Tall modal </button></div>
<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Default modal</h4> </div> </div> </div></div>
<div id="modalTall" class="modal modal-tall fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal has 90% height</h4> </div> </div> </div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Unable to fix Antd Modal Height
Try this way
<Modal
bodyStyle={{height: 1000}}
>
Your content
</Modal>
Bootstrap modal body max height 100%
I caved in and wrote coffeescript to fix this. If anyone's interested, here's the coffeescript:
fit_modal_body = (modal) ->
header = $(".modal-header", modal)
body = $(".modal-body", modal)
modalheight = parseInt(modal.css("height"))
headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))
height = modalheight - headerheight - bodypaddings - 5 # fudge factor
body.css("max-height", "#{height}px")
# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))
Or the equivalent javascript as generated per above.
var fit_modal_body;
fit_modal_body = function(modal) {
var body, bodypaddings, header, headerheight, height, modalheight;
header = $(".modal-header", modal);
body = $(".modal-body", modal);
modalheight = parseInt(modal.css("height"));
headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
height = modalheight - headerheight - bodypaddings - 5;
return body.css("max-height", "" + height + "px");
};
$(window).resize(function() {
return fit_modal_body($(".modal"));
});
Related Topics
How to Display Block Div on Hover a Tag
Why Is Blue Circle Not Spinning in The Center of Itself
When Using Grid 960, How to Still Have a 100% Width Header Section
How to Give Internet Explorer Different CSS Lines
Only First Media Query Working
How to Position Button Sprites CSS
How to Achieve This Visual Using CSS
Extend Only First Level on Sass
How to Make a Wordpress Theme Full Width
Color Change of Navigation Buttons When Scrolling Up and When Scrolling Down
How to Add Second Level to a Submenu in a Dropdown Navigation CSS
Is There a Way in CSS to Move an Element in The Dom
@Font-Face: Bold in Ff Is Bolder Than in Chrome
How to Make Popup Look at The Centre of The Screen