Quasar: Opening Model / Drawer causes layout change

[sagikarni]

When opening a dialog / Model or a drawer the content area are greyed out a bit (with opacity) AND the document scroll is disapearing.
This causes a slight "jump" sue to the layout change/resize.
At first glance it does not look like big issue , However from a UX perspective
this is certainly a big issue.
It would be great if next release will include a fix.
Thanks
Sagi

[rstoenescu]

Please offer a video screen capture or something to understand exactly what you are referring to and reopen ticket with it. Thanks.

[sagikarni]

Hi,
Take a look at the attached files.
The first shows the page layout before the model was opened. You can see the scroll and the width of the navbar.
The second image shows the page after the model was opened. You can see that the scroll does not exists any more ans there for the nav width (and the document cotent) changed its width.
This results a behaviour which is highly not recomended from UX point of view - there is a small jump / layout change every time a model / alert / drawer are opened or closed/

Thx

[rstoenescu]

I had this taken care of. Then people argued it was horrible to add padding to layout when scrollbar dissapears. Now you say "put it back". What should I do? :)

[sagikarni]

What i'm saying is that the fact that the scroll changes its visibility and as a result the document body width is changing accordinaly ,really damages in the user expirience.
I would highly advise to fix this issue .
I can also say thatbi have presented this behaviour to some of my colleagues (also with great deal of expirience in development and/or ux) and they all agreed .
Thx
Sagi

[rstoenescu]

So let me get this straight. What kind of behavior are you expecting? Keep in mind that:

1. If the scrollbar doesn't disappears then you can scroll the page while Modal/Dialog is being displayed. Not what we want.
2. If the scrollbar disappears then we need a right-side padding (the size of the scrollbar) so that Layout size won't change. But it looks ugly with white (or whatever color the body is) area on the right side. Again not what we want.

As I see it, it's about choosing the less bad behavior. Any comments or a third option with no drawbacks?

[sagikarni]

2 is certainly not an option.

the best option is #1. yes , it means that user can still scroll , but there is no layout change that causes a flicker in the user's eyes..
I can tell you for sure that from a UX percpective option #1 is much better rhan the current implementation (personally , i would not use those components now). and I had explored it a bit and realized that most of the UI components / frameworks i know follow #1 rule. (kendoui, syncfusion,vuetify , react and so on...)

[sagikarni]

Any news ?

[rstoenescu]

Working on it for 0.15.9. If someone complains about the new behavior I will go mad :)

[sagikarni]

Hi,
I think there is option #3.
go to facebook and share a post.
In this case the layout does not change while the scroll is still visible.
It looks like facebook are diabling the scoll rather then removing it. Hence the layout is OK and the scroll is not active.
Thx
Sagi

[rstoenescu]

Can you share a video capture with what you saw pls?

[sagikarni]

[sagikarni]

Any thoughts ?

[danikane]

I remember the discussions about this in v0.14. :)
You can't make everyone happy. 😆