Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dialog component scrollbar shift #882

Closed
palagadec opened this issue Jan 25, 2021 · 8 comments
Closed

Dialog component scrollbar shift #882

palagadec opened this issue Jan 25, 2021 · 8 comments
Assignees
@mertsincan
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone
3.35.0

Comments

@palagadec
Copy link

When opening a modal Dialog, the scrollbar is removed which results in a 15px shift on the body

Expected Behavior

No shift when opening a modal

Current Behavior

With modal property set to true (adds p-overflow-hidden class in body), the scrollbar is removed which creates a 15px shift.

Possible Solution

  • Counterbalance by adding a 15px right padding to the body when adding p-overflow-hidden class.
  • Keep the scrollbar

Steps to Reproduce

  1. Use the Dialog component with :modal="true"
  2. Open the modal
  3. Notice the shift

Description

I'm suggesting to change the modal behaviour so that the shift induced by the scrollbar removal is no longer visible.

Possible Implementation

In Dialog.vue, when adding the 'p-overflow-hidden' class to document.body, also add a 'p-pr-15' class (padding-right: 15px;) and remove it when removing the overflow class
@cagataycivici cagataycivici added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Feb 2, 2021
@cagataycivici cagataycivici added this to the 3.5.0 milestone May 11, 2021
@mertsincan mertsincan removed this from the 3.5.0 milestone May 15, 2021
@mertsincan mertsincan removed Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add priority - medium labels May 15, 2021
@mertsincan
Copy link
Member

Hi,

This is entirely dependent on the user's layout. Adding padding* CSS can break the app of users Or the same behavior continues if any element such as topbar or footer has position: fixed. Therefore, Users can override p-overflow-hidden class according to their needs. We may use overflow: overlay instead of overflow: auto for such problems in the future. Not all browsers currently support this. https://caniuse.com/css-overflow-overlay

Best Regards,

@mertsincan mertsincan added the Resolution: Wontfix Issue will not be fixed due to technical limitations label May 15, 2021
@vasiliyaltunin
Copy link

You can just override with:

.p-overflow-hidden {
  overflow: auto;
}

It still allow to user to scroll page, but no more shift and in modal mode i did not see how it can harm, because user can't click through overlay!

@johannranudd
Copy link

johannranudd commented May 18, 2023 •
edited
Loading

.p-overflow-hidden { overflow: auto; }

Works perfectly!

@areindl
Copy link

areindl commented Jun 15, 2023 •
edited
Loading

Hey all!

I found a nicer solution:


html,body {
    scrollbar-gutter: stable both-edges !important;
}

With the scrollbar-gutter, the scrollbar is still locked and the layout shift is not there anymore!

@cagataycivici cagataycivici added this to the 3.35.0 milestone Sep 22, 2023
@cagataycivici cagataycivici added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Resolution: Wontfix Issue will not be fixed due to technical limitations labels Sep 22, 2023
@cagataycivici
Copy link
Member

cagataycivici commented Sep 22, 2023 •
edited
Loading

Reopening due to community feedback. In 3.35.0 blockScroll will help as well but a nicer solution is preferred.

@mertsincan mertsincan reopened this Sep 25, 2023
@mertsincan
Copy link
Member

mertsincan commented Sep 25, 2023 •
edited
Loading

Affected components:

  • Dialog
  • BlockUI
  • Calendar
  • Galleria
  • Image
  • Sidebar

mertsincan added a commit that referenced this issue Sep 25, 2023
@mertsincan
Refactor #882
5e53cef
@cetincakiroglu cetincakiroglu mentioned this issue Sep 25, 2023
Closed
6 tasks
@buraksaglam089 buraksaglam089 mentioned this issue Sep 25, 2023
Closed
6 tasks
@mertsincan mertsincan mentioned this issue Oct 10, 2023
Closed
6 tasks
@habubey habubey mentioned this issue Oct 11, 2023
Closed
6 tasks
@timyourivh
Copy link

I have a layout that does not make use of body overflow and causes my page to shift like the issue describes.
I fixed this by adding this to my CSS:

body.p-overflow-hidden {
    --scrollbar-width: 0px !important;
}

This will prevent the padding from being applied to the body as no scrollbar will ever appear in our body due to our layout.

@tommie
Copy link

tommie commented Oct 26, 2023

For anyone screwing this up like I just did, and seeing shifts in 3.37.0: make sure you don't set scrollbar-gutter: stable on <html>. Only <body>. I had the

html, body {
  margin: 0;
}

rule and simply added scrollbar-gutter there. Bad idea. :)

body {
  margin: 0;
  scrollbar-guttern: stable;
}

works. (Perhaps resetting margins on <html> is a relic that isn't necessary today. Seems fine in Chrome.)

@VicTMPDeV VicTMPDeV mentioned this issue Aug 20, 2024
Open
@VicTMPDeV VicTMPDeV mentioned this issue Aug 28, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mertsincan mertsincan

Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Milestone
3.35.0
Development

No branches or pull requests
8 participants
@tommie @vasiliyaltunin @cagataycivici @areindl @mertsincan @johannranudd @palagadec @timyourivh