Correct way to increase bootstrap modal's height

Question

I am trying to find a workaround for increasing the height of my bootstrap modal. I did try the maximum fix way in the modal body, but that just cuts off my modal if it goes oversize. I am trying to find a way to make it work like how modals work on pinterest.

I have already disabled the main page body scrolling when the modal is open. But I am having troubles with adjusting the size.

Does anyone have any work arounds for that?

I tried adding height to my modal (height:95%;) and modal_body (max-height: 75%;), the content overflows out of the parent div (modal)

I've attached a screenshot to demonstrate the same

Update

I ended up making my own modal with the pintrest kind of attributes. this question helped me alot with it

Answer 1

Try with this js to calculate the modal height:

$(document).ready(function() {
    $(".showcomments").click(function() {
        $('#myModal').modal('show');
        rescale();
    });
    $("[rel=tooltip]").tooltip();
});
function rescale(){
    var size = {width: $(window).width() , height: $(window).height() }
    /*CALCULATE SIZE*/
    var offset = 20;
    var offsetBody = 150;
    $('#myModal').css('height', size.height - offset );
    $('.modal-body').css('height', size.height - (offset + offsetBody));
    $('#myModal').css('top', 0);
}
$(window).bind("resize", rescale);

Test: http://jsfiddle.net/fUZxA/23/

Answer 2

It worked for me just fine by using this CSS:

.my-modal {
  width:600px;
  height:300px;

  .modal-header {
    background-color:#ccc;
    button {
      font-size:30px;
    }
  }
  .modal-body {
    overflow-y: hidden;
    height: 100%;
    max-height:190px;
  }

}

Update: I took a look at your fiddle. Try to add "height" to your modal.

Answer 3

The bootstrap modal opens in position: fixed. This way it will always stay on the same place no matter how much u scroll. So a part of it you might not see. If you want to see the rest of the modal you need to make it position: absolute. But the problem with this is it will always go to the top of the page. But I have a fix for this if you want to know