CODEWITHSUNDEEP
jquerycsstwitter-bootstraptwitter-bootstrap-3modal-dialog
user2571510
user2571510

Reputation: 11377

Bootstrap 3: How to detect current / default modal height

I am using Bootstrap 3 and the standard Bootstrap modals. Reviewing such a modal in Firebug shows me a default width of 600px (full screen view on my current screen) but I am not seeing the default height there.

Is there a way to detect this in Javascript / jQuery or can it be calculated based on the current window height ?

I would need this in order to calculate the max-height for dynamic content inside a modal that is used on a responsive page in order to avoid it overflowing the modal. In JS I can get the current window height with $(window).height() + I can recalculate this on page load or on page resizing with $(window).resize() so I am only missing how to get the modal height.

In Firebug it looks like by default the modal uses 4 relevant divs with the following classes so I guess the div in question would be the first or the second class: "modal", "modal-dialog", "modal-content", "modal-body"

Does someone know how to achieve this ?

Many thanks in advance, Tim.

Upvotes: 0

Views: 998

Answers (1)

sifriday
sifriday

Reputation: 4462

The idea of a bootstrap3 modal is that the modal height will size to whatever content you put in it, even if this is taller than the viewport, such that the only scrollbar will be that of the viewport. This is to be a bit more mobile-friendly:

http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

(Scroll down to 'Modals are way more responsive')

You can override this and set your modal height by adding a rule like this:

.modal-body {
  height: 200px;
  overflow: auto;
}

So if you want to control your dynamic content, and you want your modal to be the same height as the window, give or take, then you're on the right lines:

  1. Measure the window height, as you describe
  2. Use jQuery .css() to set two CSS rules on .modal-body, one to set its height to about 200px less than the window height, and one to set overflow:auto

Example:

 var h = parseInt($(window).height()) - 200;
 $(".modal-body").css({height: h + 'px', overflow: 'auto'});

You want to leave 200px space for the .modal-header and the .modal-footer, if you are using those. If not, no problem, you can adjust the 200px until you find something that works well - I think you'll always need .modal-body's height to be a bit less than the window, to allow for borders and a bit of UX spacing, etc.

You can now set the max-height of your dynamic content to be the height you applied to .modal-body.

Upvotes: 2

Related Questions