Set bootstrap modal body height by percentage

Question

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px it works as expected, but is not responsive. I am sure I am just missing something simple, but I can't seem to get it to work.

Here is an example

Doesn't work:

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

Works:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}

Groves

Answer 1

This worked for me

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

Fiddle: http://jsfiddle.net/mehmetatas/18dpgqpb/2/

Humbert

It does not work, when i gets really small. The footer will get out of the overlay – Anoxia

Replace max-height: calc(100% - 120px); overflow-y: scroll; to max-height: calc(100vh - 210px); overflow-y: auto; – Chinch

Answer 2

Instead of using a %, the units vh set it to a percent of the viewport (browser window) size.

I was able to set a modal with an image and text beneath to be responsive to the browser window size using vh.

If you just want the content to scroll, you could leave out the part that limits the size of the modal body.

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}

Auricula

Why always force scrollbars with overflow: scroll;? Curious – Nadenenader

You don't have to use overflow: scroll;. You could use overflow: auto; if you only want scroll bars to appear if it's too long. – Auricula

Scroll should be on the modal-body so it doesn't scroll the modal's header away. – Iago

That makes sense and would be a nice way to implement it too. – Auricula

With Bootstrap 4, it's better to move the overflow from modal-content to modal-body. This way, you can scroll the body of the modal while the header and the footer stays in place. – Hillari

Answer 3

This should work for everyone, any screen resolutions:

.modal-body {
    max-height: calc(100vh - 143px);
    overflow-y: auto; }

First, count your modal header and footer height, in my case I have H4 heading so I have them on 141px, already counted default modal margin in 20px(top+bottom).

So that subtract 141px is the max-height for my modal height, for the better result there are both border top and bottom by 1px, for this, 143px will work perfectly.

In some case of styling you may like to use overflow-y: auto; instead of overflow-y: scroll;, try it.

Try it, and you get the best result in both computer or mobile devices. If you have a heading larger than H4, recount it see how much px you would like to subtract.

If you don't know what I am telling, just change the number of 143px, see what is the best result for your case.

Last, I'd suggest have it an inline CSS.

Tagore

Worked for me. Similarly, using your technique, this works for the width (assuming you're using modal-lg for width): .modal-lg{ width: calc(100vw - 143px); } – Catgut

Answer 4

You've no doubt solved this by now or decided to do something different, but as it has not been answered & I stumbled across this when looking for something similar I thought I'd share my method.

I've taken to using two div sets. One has hidden-xs and is for sm, md & lg device viewing. The other has hidden-sm, -md, -lg and is only for mobile. Now I have a lot more control over the display in my CSS.

You can see a rough idea in this js fiddle where I set the footer and buttons to be smaller when the resolution is of the -xs size.

  <div class="modal-footer">
      <div class="hidden-xs">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      <div class="hidden-sm hidden-md hidden-lg sml-footer">
    <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-xs btn-primary">Save changes</button>
      </div>
  </div>

Await

Answer 5

The scss solution for Bootstrap 4.0

.modal {
  max-height: 100vh;
  .modal-dialog {
    .modal-content {
      .modal-body {
        max-height: calc(80vh - 140px);
        overflow-y: auto;
      }
    }
  }
}

Make sure the .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. This is around 140px together but you can measure it easily and apply your own custom values. For smaller/taller modal modify 80vh accordingly.

Bombproof

Answer 6

this is the solution

.modal-dialog{
            height:100%
        }
        .modal-content{
            height:90%
        }
        .modal-body{
            height:100%;
            overflow:auto
        }

Slab

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Infeasible

Answer 7

Here's a small update when using Lightbox for Bootstrap 5. It concatenates multiple div depending on what's loaded (images, html, video...) so the solutions above might not work properly.

The structure looks like this :

<modal lightbox>
  <modal-dialog>
    <modal-content>
      <modal-body>
        <carousel-item>
          <ratio>
            <!-- Lightbox puts the content in this Div -->

Of course, I named it after the classes to help readability. Mixing different answers, I came to this :

.modal-body {
    max-height: calc(100vh - 60px);
    /* Customize depending on the elements closing your content */
    overflow-y: hidden; 
    /* Lightbox already applies overflow:auto so you can skip this one */
}

div.ratio {
    height: 80vh;
    /* div.ratio is the final container so it made sense to change height here */
}

As usual, modify depending on your context, but the map I made might help you.

Palla