View Full Version : A discussion on modal masks

10 Jul 2013, 1:27 AM
Under normal circumstances, the modal mask in Ext works ok....but there are a number of issues I'm looking to address;


You have a long page containing a grid that extends below the fold. When a user clicks a row action in the grid, a modal window opens showing details of that record.


The mask extends to the top, bottom and both sides of the *document* and not the viewport and the window is centered in the viewport. This means when a user is scrolled to the bottom of the document and the grid rows, they can still scroll back up the document and will see a massive space above the modal window (obviously if they're at the top of the document to begin with the massive space will be below the window). In fact, depending on screen sizes, it's possible for a user to scroll that dialog completely out of view with the modal mask still in effect. IMVHO this is a very poor UX.

More Desirable Behaviour:

The mask size is determined by the greater of either the modal dialog height (plus some spacing for a nicer layout) or the viewport height. While open, the user can only scroll to the top and bottom of the modal dialog if it extends out of the viewport and not at all if it's smaller than the viewport.

Other Related Problems:

If you have a long form in a modal dialog window and do nothing to manually position it when shown, it's possible for it to protrude out the top of the document window where it's impossible to reach the header to reposition it. Ext's default window open method centers the window in the viewport, regardless of it's size.

So far I'm struggling to fix the main problem (the related problem is easy with a show listener on windows so they reposition themselves but I would argue they should do this out the box) but I'm continuing to experiment today. Any pointers or related experiences welcome. My feeling is this issue is largely due to the changes in the way masks are implemented in Ext4 vs Ext3; as the mask is an entirely separate entity to the window rather than wrapping it, it makes it very difficult to get this UX right.

11 Jul 2013, 2:12 PM
What you're describing sounds like bugs.
Can you post a bug report (with accompanying test case) for each issue in the bugs forum?

11 Jul 2013, 11:42 PM
I'll try get some time this weekend to put together a little JSFiddle. Thanks.

15 Jul 2013, 2:25 AM

This is a little example of what I'm talking about. The document is long and when the dialog is opened, the user can scroll up the doc to the top and lose the window out the bottom of the screen. Is this considered a bug or just a poor UX based on how Ext4 has chosen to implement masks?

16 Jul 2013, 2:24 PM
I believe this is more a distinction of how windows work and not the modal mask itself. If you show a window it is centered to the viewable area of the window's container by default. But it's not re-centered when the browser doc is scrolled or resized. With your example if you run it in a browser window sized to be very narrow and then you resize the window to be wide the window will slide out of view (if given enough space to work with).

I don't think what you're seeing is categorically a bug. But, feel free to enter a feature request on the Feature Request thread for an option to re-center floating components (windows being the primary floated components, but other components have the floating mixin as well) on scroll / resize of the window's parent container.

17 Jul 2013, 1:07 AM
Yea, I agree - it's not a bug as such but definitely a functional hole. I've managed to put in place a series of complex listeners to move things around for now but this isn't optimal.

The reason I highlighted this was that in other frameworks, every modal overly, almost without exception, displays the content and only allows the users to scroll to the top and bottom of *that content*. After all, that's what a modal overlay is all about - focussing the user on a floated item and nothing more.

Unfortunately I don't see Ext every being able to solve this problem - they made a choice in v4 to separate masks entirely from the elements they're masking (for better or worse) and therefore restricting the scroll extremities of a modal overlay to just the overlay and not the entire document is nearly impossible.

25 Sep 2013, 5:01 AM
Just looking to bring this conversation to the fore again as it's still presenting me a major headache.

For those who just want a quick summation; I'm looking for a workable solution so that a modal window in ExtJS would case the scrollable area of the browser to encompass the window and nothing more.

So, regardless of the length of the page before you open your window (and to highlight the issue here let's assume it's 4x the browser window height), if your window is shorter than the browser height, no scrolling would be possible and if the window is taller than the browser height, you would be able to scroll to the bottom of the window and no further.

Sounds simple. Not in ExtJS. If you have a long page and open a modal window, you can continue to scroll the page behind and lose your modal window out the top/bottom of the page.

27 Sep 2013, 11:16 AM
Why don't you use Viewport around components with scrollable areas? Think about usual desktop application - how many of them allow you to scroll whole UI?

29 Sep 2013, 11:27 AM
Why don't you use Viewport around components with scrollable areas? Think about usual desktop application - how many of them allow you to scroll whole UI?

You mean rather than have a modal window, have a viewport that contains a "window" with components on it so the scroll would only be within the viewport while it was open?

I tried this but trying to get the viewport to close and destroy itself nicely in the same way a user would expect a window to close was tricky, especially when my current windows hide rather than destroy. Last thing I want is massive memory leaks all over the place but then I'm not sure of the footprint of a viewport. I may have to revisit that though as it's the only way I can see it being possible.

30 Sep 2013, 4:06 AM
No, a Viewport is used in a totally different way.
Primarily, it represents the browser space that is available to your application. Because it fits into the window neither document, nor body are scrollable. Then you split the space between several parts of your application. If you wish to display some long list of some things, you add scroll to that list.
Ext Windows are rendered to body, but because it is not scrollable, they won't move and mask won't need a reposition.

1 Oct 2013, 12:31 AM
Yea, I know what a viewport is :)

Unfortunately, that solution isn't workable in this instance for a few reasons, but mainly:
1. Ext in our application is not the only framework in play and is only responsible for forms and grids. It's not a "through-and-through" Ext app.
2. This is an enterprise scale app; making a change that radical to get round Ext's poor modal implementation isn't an economically viable proposition.

1 Oct 2013, 10:19 PM
Well, in this case you can use 'modal implementation' of some other, already hired, framework. :)