The right way to increase the initial loading height

Question

I am trying to find a workaround to increase the height of my boot modal. I tried using the maximum fix path in the modal body, but that just disables my modal if it is oversized. I am trying to find a way to make it work, like how the modals work on pinterest.

I already disabled scrolling of the body of the main page when the modal is open. But I have problems adjusting the size.

Does anyone have any problems?

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

I added a screenshot to demonstrate the same

Update

I ended up making my own modal with pintrest attributes. this question helped me deal with it

Answer 1

Try using this js to calculate 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

This worked for me just fine 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 violin. Try adding "height" to your modal.

Answer 3

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