Increase modal size for Twitter Bootstrap

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 scrolling if required myself.

The form I render probably needs another 50px - just missing the buttons.

So I have tried overriding the .modal styles in my application.css.scss file (Using Rails 3.2) but the max-height and overflow declerations seems to be overwritten.

Any thoughts?

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.

Mixing up two methods for width and height and you have a good hack:

CSS:

#myModal .modal-body {max-height: 800px;}

JQuery:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

This one is the one I use. It fixs the margin and the scrollbars issues for both width and height but it won't resize the modal to fit its content.

Hope I was of help!

Using a CSS class (you can also override style - not suggested):

(html)

<div class="modal-body custom-height-modal" >

(css)

.custom-height-modal {
  height: 400px;
}

Bootstrap Large model

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

Bootstrap Small model

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

I got the answer... the thing is that you have overwrite the max-height attribute as well to bootstrap modal can be resized beyond the 500px height limit

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...

Have you tried the size parameter:

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",
                

Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

1. default: 600px
2. sm : small, width of 300px
3. lg : large, width of 900px

If you want something different, update the bootstarp.css

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

For Boostrap > 4 this worked for me:

.modal-content{
  width: 1200px;
}

a more advanced version:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

here is a codepen:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Assuming that your modal has an id of modal1 the following CSS would increase the height of the modal and display any overflow.

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

Tried a few of the above as need to set specific sizes of width and height (to display an image in a modal)and as none above helped me I decided to override the styles and have added the following to the main < div > that has class="modal hide fade in" in it : i.e. added a width to the style tag for the background of the modal.

style="display: none; width:645px;"

and then added the following 'style' tags to the modal-body:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

works like a charm now, I'm displaying an image and now it fits perfect.

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.

Don't forget the optional bootstrap classes modal-lg and modal-sm if you want to keep within the responsive framework. And add a clearfix below your form, that may help dependent on your structure.

I was recently trying this and got this correct: Hope this will be helpful

 .modal .modal-body{
        height: 400px;
    }

This will adjust height of your model.

Here is another simple method to increase the size of the bootstrap modal:

$(".modal-dialog").css("width", "80%");

The width of the modal can be specified in terms of percentage of the screen. In the above example i have set it to 80% of my screen width.

Below is an working example of the same:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- 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">&times;</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>

</body>
</html>