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

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

Answer 2

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

Answer 3

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;
}

Answer 4

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;
  }
}

Answer 5

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.

Answer 6

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;
}