search

creativetimofficial / ct-material-kit-pro-react

React version of Material Kit Pro
39 stars 12 forks source link

[Bug] Modals move other UI elements when opening and closing #81

Closed rickstaa closed 3 years ago

rickstaa commented 3 years ago

Version

1.9.0

Reproduction link

https://demos.creative-tim.com/material-kit-pro-react/#/components

Operating System

Ubuntu 20.04, windows 10

Device

Hp Zbook G5

Browser & Version

Chrome v8.0.4324.150, firefox v85.0.1

Steps to reproduce

  1. Open the material-kit-pro-react demo website.
  2. Go to the components page.
  3. Click one of the modals.
  4. See the header and right dots jump.

    What is expected?

    I expected the other UI components to stay still when toggling the modal.

What is actually happening?

Currently, some elements are moved when the modal is opened and closed.

modal_problem

Solution

I did not yet find a solution to this problem. It looks like it is related to the scrollbar. I tried the solutions in this stackoverflow post but they don't seem to work.

Additional comments

Seems to be related to:

einazare commented 3 years ago

Hello there, @rickstaa ,

Unfortunately, this cannot be solved. It is because on Windows devices, the Scrollbar, when you open a modal, it disappears. And there is no way of solving this. It is the browser default behavior.

Best, Manu

rickstaa commented 3 years ago

@EINazare I think your right. It seems to occur on Linux and Windows. I think if this is solvable it should be done in the material-UI repository. You can follow the related issue here.

rickstaa commented 3 years ago

@EINazare Actually it seems they already fixed in Material-UI v5.

Tetedeiench commented 3 years ago

To anyone coming accross this issue, this is caused by the Dialog setting "overflow-y: hidden" when appearing on the body, which causes the scrollbar to disappear.

A fix for me was to set 'overflow-y':'auto !important' on the body element (CSS).

It's probably not the best fix, but it does the trick wonderfully for me !

rickstaa commented 3 years ago

@Tetedeiench Thanks a lot for uploading the fix. I'm glad that your solution worked out for you. Maybe I'm doing it wrong but for me, in the new chrome/firefox browsers, this, unfortunately, does not work. Adding the overflow-y: auto !important property adds extra padding for the scrollbar but still moves the elements.

problem-overflow

Tetedeiench commented 3 years ago

Hi @riskstaa,

Here's the problem reproduced on my (currently in dev) website : scrollbar dialog issue

And with the fix i mentioned : scrollbar dialog issue fixed

I'm NOT an expert in frontend dev (quite the contrary), but the issue seems to be the dialog forcing overflow-y to hidden when appearing.

This in turn hides the scrollbar if any was displayed before the dialog appeared, which moves the page behind the dialog to deal with this.

Of course, make sure you force overflow-y to any value you currently use with the dialog closed. I use auto personally !

I think in your case, looking at your CSS, simply forcing "overflow: hidden !important" will prevent the dialog from fiddling with it when appearing and things should go smooth. Also, make sure you're doing the change before opening the dialog, as changing this value when the dialog is opened will make things shake ;)

The fix is just making sure the scrollbar stays in place when the dialog is opened.

Edits : lots of spelling mistakes and clarifications, sorry.

WROIATE commented 1 year ago

@Tetedeiench Thanks a lot for uploading the fix. I'm glad that your solution worked out for you. Maybe I'm doing it wrong but for me, in the new chrome/firefox browsers, this, unfortunately, does not work. Adding the overflow-y: auto !important property adds extra padding for the scrollbar but still moves the elements.

try add padding-right: 0 !important to body css