How to Limit The Height of The Modal

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



Leave a reply



Submit