Question

I have a custom sized (80% height width) bootstrap modal body and it scrolls (body content will overflow on some sized screens)

There are 2 problems:

1. I can’t set the max-height to 100% as that will be 100% of the entire document instead of the max height of the container, which is what i need for scrolling to work properly.
2. If there is a div with a fixed height inside the modal body at the very end, it will overflow outside of the modal if the screen is not big enough for the content.

How would I fix this? I’m currently experimenting with negative margins but i’m not too familiar with it.

JavaScript solutions are acceptable (jQuery is available as is backbone.js)

Thanks

Edit: Screenshot provided

Edit 2: More screenshot

Answer 1

I caved in and wrote coffeescript to fix this. If anyone’s interested, here’s the coffeescript:

fit_modal_body = (modal) ->
  header = $(".modal-header", modal)
  body = $(".modal-body", modal)

  modalheight = parseInt(modal.css("height"))
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))

  height = modalheight - headerheight - bodypaddings - 5 # fudge factor

  body.css("max-height", "#{height}px")

# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))

Or the equivalent javascript as generated per above.

var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = modalheight - headerheight - bodypaddings - 5;
  return body.css("max-height", "" + height + "px");
};

$(window).resize(function() {
  return fit_modal_body($(".modal"));
});