Add a 'maxHeight' option to keep modals from extending past the screen.#67
Add a 'maxHeight' option to keep modals from extending past the screen.#67birds-inc wants to merge 1 commit intokylefox:masterfrom
Conversation
I encountered an issue with modals that contain more content than is viewable on the screen, or are viewed in on a small screen/browser window. To get around this, I've added an option called maxHeight, which limits the vertical percentage of the screen that the modal will take up. It has a default value of null, which results in the current behavior. If you set it to a decimal (i.e. 0.90 for 90%), it will take the following actions: * Apply the max-height, overflow-x (hidden), and overflow-y (auto) properties to the modal before applying centering logic * Create an event handler for the window.resize event that calls $.modal.resize * Removes the handler on modal close I've also updated the README and examples page accordingly. There is one small issue introduced by maxHeight - the addition of overflow-y may add a scroll bar to the modal, which can potentially cover up a close icon. Since there's no way to place an element above the browser chrome, or other universal positioning fix, handling this case is left as an exercise for the user. Intermediate commits: Add example/test case Add max-height if set, create handler to call resize on .resize event, still need to figure out close icon Update README.md accordingly Re-minify with Closure Compiler with default options We only need to set up maxheight and overflow properties on open(), not center() Ensure positioning is fixed from the get-go and show element while we're centering (should not actually render) Fix a little typo Update minified js
|
Nice addition. However it appears to obstruct the close button (see screenshot). |
|
Yeah, I spent a good while dealing with that one. AFAICT the close button On Tue, Jan 14, 2014 at 8:10 AM, Kyle Fox notifications@github.com wrote:
|
|
Personally, I styled the modal so the close button is inside, so for me its working great as you can see in the image the scroll bar together with the 'X' button, so thanks for this!
The only issue for me is that the scroll bar takes about 20 pixels of space, so the content space now is smaller and this can cause some issues when using elements with fixed witdh... |
|
I've added this code just inside the center function to address this problem. It just changes it from fixed to absolute and positions it correctly. That way it is scrollable. |
|
Resolved by #110 |
I encountered an issue with modals that contain more content than is viewable
on the screen, or are viewed in on a small screen/browser window.
To get around this, I've added an option called maxHeight, which limits the
vertical percentage of the screen that the modal will take up. It has a default
value of null, which results in the current behavior. If you set it to a
decimal (i.e. 0.90 for 90%), it will take the following actions:
the modal before applying centering logic
I've also updated the README and examples page accordingly.
There is one small issue introduced by maxHeight - the addition of overflow-y
may add a scroll bar to the modal, which can potentially cover up a close icon.
Since there's no way to place an element above the browser chrome, or other
universal positioning fix, handling this case is left as an exercise for the
user.
Intermediate commits:
Add example/test case
Add max-height if set, create handler to call resize on .resize event, still
need to figure out close icon
Update README.md accordingly
Re-minify with Closure Compiler with default options
We only need to set up maxheight and overflow properties on open(), not center()
Ensure positioning is fixed from the get-go and show element while we're centering (should not actually render)
Fix a little typo
Update minified js