Advanced

Question

I am using twitter bootstrap for the project I'm working on.

I have a modal window with a slightly longer shape, and I did not like it when the window became too small, the modal did not scroll (if it just disappeared from my page, which does not scroll).

To fix this, I used the following css

.modal { overflow-y:auto; max-height:90%; margin-top:-45%; } 

This works exactly the way I want it in Chrome (i.e. the form is full size when the window is large enough, but as the window shrinks, the modal shrinks and becomes scrollable). The problem is that in IE the modal version is disabled. Does anyone have a better solution to this problem?

My example can be found at tinyhousemap.com (click "Add Entry to Map" in the navigation window to display modal text)

thank

Answer 1

How about the solution below? It worked for me. Try the following:

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

More details:

• remove overflow-y: auto; or overflow: auto; from class .modal (important)
• remove max-height: 400px; from the .modal class (important)
• Add max-height: 400px; in .modal.modal-body (or whatever it may be 420px or less, but not more than 450px )
• Add overflow-y: auto; in .modal .modal-body

Done, only the body scrolls.

Answer 2

I made a small decision using only jQuery.

First you need to add an extra class to <div class="modal-body"> , which I called "ativa-scroll", so it will look something like this:

<div class="modal-body ativa-scroll">

So now just put this piece of code on your page, next to the JS download:

 <script type="text/javascript"> $(document).ready(ajustamodal); $(window).resize(ajustamodal); function ajustamodal() { var altura = $(window).height() - 155; //value corresponding to the modal heading + footer $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"}); } </script> 

I work great for me, also in a responsive way! :)

Answer 3

 /* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; } 

This works for Bootstrap 3 without JS code and is responsive.

Source

Answer 4

Try reloading the boot file:

  .modal { position: fixed; 

FROM

 .modal { position: absolute; 

It worked for me.

Answer 5

I also added

 .modal { position: absolute; } 

to the stylesheet, allowing you to scroll through the dialog, but if the user has moved to the bottom of a long page, the modal part may be hidden from the top of the visible area.

I understand that this is no longer a problem in bootstrap 3, but the search for a relatively quick fix until we update, I ended up with the above plus and called the following before opening the modal

 $('.modal').css('top', $(document).scrollTop() + 50); 

It seems that you are satisfied with FireFox, Chrome, IE10 8 and 7 (browsers that I had to hand over)

Answer 6

Your modal is hidden in firefox, and this is due to the negative field declaration that you have in your shared stylesheet:

 .modal { margin-top: -45%; /* remove this */ max-height: 90%; overflow-y: auto; } 

Remove the negative margin and everything works fine.

Answer 7

The problem with the @grenoult CSS solution (basically it works) is that it is completely responsive and mobile when the keyboard pops up (i.e. when they click on the input in the modal dialog) the screen size changes and the modal size of the dialog changes , and he can hide the data entered by him, so they can not see what they are typing.

The best solution for me was to use jquery as follows:

 $(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" }); 

It does not respond to window resizing, but this does not happen anyway.

Answer 8

I managed to overcome this using the "vh" metric with max-height on the .modal-body element. 70vh looked at me correctly. Then set overflow-y to auto so that it scrolls only when necessary.

 .modal-body { overflow-y: auto; max-height: 70vh; } 

Answer 9

None of this will work as expected. The correct way is to change position: fixed in position: absolute for .modal class

Answer 10

If .modal {overflow-y: auto;} is used, an additional scroll bar will be created to the right of the page when the body is already full.

The job for this is to temporarily remove the overflow from the body tag and set autoal overflow-y to auto.

Example:

 $('.myModalSelector').on('show.bs.modal', function () { // Store initial body overflow value _initial_body_overflow = $('body').css('overflow'); // Let modal be scrollable $(this).css('overflow-y', 'auto'); $('body').css('overflow', 'hidden'); }).on('hide.bs.modal', function () { // Reverse previous initialization $(this).css('overflow-y', 'hidden'); $('body').css('overflow', _initial_body_overflow); });