Increase modal size for Twitter Bootstrap

Question

I am trying to change the size of the modal form or rather - have it respond to the content I render there. I am using it to render a form and would prefer to deal with scro

Answer 1

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.

Answer 2

This worked for me:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

Note that in my case, I have nested modals, each having controls which require different heights when I toggle control's display inside the nested modal, so I could not apply the max-height, instead height:100% works for me well.

Answer 3

Bootstrap Large model

<div class="modal-dialog modal-lg">

Bootstrap Small model

<div class="modal-dialog modal-sm">

Answer 4

Just set ".modal-body" height : 100% it will auto adjust the height as per your content and do put "max-height" as per your screen...

Answer 5

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.