3

In an application or site that employs modals (like these) what is seen as the best approach for managing the dynamically added additional space when a scrollbar is needed?

When a modal opens currently the page's available content width can change by about 17px (depending on whether the page has a scrollbar, what browser, screen width and whether the modal has a scrollbar itself). This width change causes the content to re-flow slightly, both in the modal and page behind, on opening and closing the modal.

Edit to add e.g.

Before the modal is opened

Before the modal is opened

After the modal is opened

After the modal is opened

The modal itself is not changed, it is the addition of overflow: hidden on the body that changes the page width, because it hides the scrollbar so the user can (if necessary) scroll within the modal.

/Edit

I've had comments from users (who were asked to think generally about improvements) that "some popups [modals] are broken" because they "jump about the screen". Testing suggests this is a marginal, width-only movement, but it is jerky as a scrollbar is basically popping between display: none and display: block).

The options I can see:

  1. "Fix" what a minority of users have complained about when prompted for issues (but potentially all have noticed) and implement a complex scrollbar-width-compensating in JavaScript similar to that implemented in Bootstrap.
  2. Make a statement about why this is not going to happen
  3. Attempt a third-way using a more simplistic hack in the front end that animates the change in width via CSS making it a "feature" rather than a "bug"
  4. Hum quietly to myself and move on to the next thing, using the justification that only a small proportion of users mentioned it

(1) is time-expensive and requires a lot of testing, (2) could aggravate users, (3) is not something users have explicitly asked for but kinda / maybe / might / sort of be OK and (4) is favoured by management under the heading "expediency"

I find all these options to be unpalatable to a greater or lesser degree for different reasons so is there a UX or UI way to solve this, a generally accepted way of managing this kind of issue or even a best option?

2
  • The first thing I'd try to do is to eliminate modal all together. Second is that question probably belongs to link because the issue is not in UX but in code. The fix is easy: you need to apply overflow-y: auto on modal container. I can't imagine a situation where modal would shift the actual content on the page if it's done right.
    – Runnick
    Mar 24, 2017 at 16:03
  • Eliminating modals is not an option. overflow-y:auto won't fix the problem - see github.com/twbs/bootstrap/issues/9855 or github.com/twbs/bootstrap/issues/14040 for some discussions of why (for TBS). Almost every type of modal moves page content to some degree, here is an example: t4t5.github.io/sweetalert. My question is more to do with whether it is necessary in this instance to take action based on user feedback and if so, what action is best.
    – tymothytym
    Mar 24, 2017 at 16:49

1 Answer 1

1

I believe that horizontal overflow of the data is also or an prion.

There are several things you need to deal with, and some that you need to live with.

The first thing to live with is: if a web app uses modals, it is going to use modals. This may be obvious, but eliminating every modal out there would probably lead to changing a lot of the solutions that work for Users now, affecting them in some cases (probably). The cost and potential harm you would do would be bigger than the gain (most probably).

The second thing to live with is: if you cannot tell how much content will be put in modals, preventing the scroll bar from showing is not an option.

And the third one: it is not possible to make everyone happy (and there is never a business reason in trying to do so). Optimisation is a matter of improving things, not making them perfect. So, you need to decide first if the significance of the problem is high enough.

You can experiment with the changes you make, and when experimenting, try to apply some simple tweaks first.

These are the cornerstones for your further decision. The approach I would suggest from now would be conducting some simple experiments and seeing if it improves the usability for the Users.

The first experiment I would suggest would be making the page scroll bar always visible and checking the Users' feedback.

Regarding the content in the modals, I would display the scroll bar only if there is something overflowing it, and maybe indicating this content by slightly fading it to transparent near the bottom of the scrollable area. In extreme cases of some information being omitted I would also consider adding an indicator that there is more data to present in the modals.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.