Menu
I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px it works as expected, but is not responsive. I am sure I am just missing something simple, but I can't seem to get it to work.
Here is an example
Doesn't work:
.modal-body { max-height:40%; overflow-y: auto; } Works:
.modal-body { max-height:400px; overflow-y: auto; } 
455
modal-body use calc() function to calculate desired height. In above case we want to occupy 80vh of the viewport, reduced by the size of header + footer in pixels. This is around 140px together but you can measure it easily and apply your own custom values. For smaller/taller modal modify 80vh accordingly.
The Dialog supports resizing feature. To resize the dialog, we have to select and resize it by using its handle (grip) or hovering on any of the edges or borders of the dialog within the sample container.
To implement a responsible popup that can be minimized to the bottom of the page: Set the Top and Left parameters to control the position of the modal. Use boolean flags to show and hide the popup. Use the MediaQuery component to make the modal window responsive.
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
This worked for me
.modal-dialog, .modal-content { /* 80% of window height */ height: 80%; } .modal-body { /* 100% = dialog height, 120px = header + footer */ max-height: calc(100% - 120px); overflow-y: scroll; } Fiddle: http://jsfiddle.net/mehmetatas/18dpgqpb/2/
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
