I’ve enjoyed using Bootstrap 3 lately, but was limited by the fixed-width of the modal dialog boxes. I wanted to override the default Bootstrap modal so it was variable-width and height-optimized.
I created CSS classes to handle the width, and the optional introduction of a scrollbar for extra-tall content. Then, I just add “modal-wide” to the main modal div. In the example below, I’m using 90%.
Override the default Bootstrap 3 modal so it is variable-width and height-optimized #bootstrap Click To TweetThis works fine as-is, as long as the height of the content in the modal dialog is not too tall. If that’s the case, we need to introduce a max-height to that content area. I use jQuery to calculate this based off the browser height. The result: the modal will be only as tall as necessary, and will provide a scrollbar if needed.
Want more?
Subscribe to my TinyLetter at tinyletter.com/scottpdawson
This is great. Exactly what I was looking for. And so simple to implement. Thank you!
Very simple and useful. Thank you!
Wonderful.It saved my lot of time and efforts.Thanks
The logical way to do it would be to follow the grid layout model, e.g., ‘modal-sm-5’ for example; and generate a set of ‘modal-*’ classes to accommodate various widths.
That would be a nice extension of the approach if you needed that flexibility. I didn’t, so that’s why my approach was, well, logical for me and the specific use case we needed to offer a solution for.
Hey Scott, awesome article! I have an iframe within a modal window and wanted the height/width to adjust dynamically according to the iframe content. Is this possible?
Thanks, Dave! I’m sure that is possible. I imagine if you set the iframe width to 100%, and after the modal opens you used JavaScript to determine the height of content–body, you could set the height of the iframe accordingly using JavaScript.