Menu
Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.
modal max-height is 100vh . Then for . modal-body use calc() function to calculate desired height. In above case we want to occupy 80vh of the viewport, reduced by the size of header + footer in pixels.
Answer: Set width for . modal-dialog element Similarly, you can override the width property of . modal-sm , . modal-lg and . modal-xl class to resize the small, large and extra-large modal dialog box respectively.
I was having the exact same problem, you can try:
.modal-body {
max-height: 800px;
}
If you notice the scroll-bars appear only on the body section of the modal dialog, this means that the max-height of only the body needs to be adjusted.
in Bootstrap 3:
.modal-dialog{
width:whatever
}
You need to make sure that it is on the #myModal .modal-body element not just #myModal (Seen a few people make this mistake) and you may also want to accomodate for the height change by changing the modals margins.
Using the new CSS3 'vh' (or 'vw' for width) measurement (which sets the height as a fraction of the view port) use:
.modal-body {
max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}
This way, if you're using a responsive framework, like Bootstrap, then you can keep that design in your modals too.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With