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%.
This 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.
Related Posts
There are 23 other posts like this one. Here are some other recent ones:
How to Inspect Hovered Elements (Menus, Tooltips, and Dialogs, Oh My)July 1, 2024 – I found this technique useful for debugging CSS inside ephemeral DOM elements.- How to Automatically Create Google Calendar Events from a Google SheetFebruary 12, 2023 – If you need to automatically create Google Calendar events from data in a Google Sheet, this pared-down example should work well for you.
- Shakespeare Insult GeneratorOctober 10, 2021 – I created this Shakespeare Insult Generator: it converts three arrays of adjectives and nouns into a delightful random insult that would have thrilled the Bard himself.
