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 #13732

Closed
6 tasks done
cetincakiroglu opened this issue Sep 25, 2023 · 0 comments
Closed
6 tasks done

Dialog component scrollbar shift #13732

cetincakiroglu opened this issue Sep 25, 2023 · 0 comments
Assignees
@cetincakiroglu
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone
16.4.0

Comments

@cetincakiroglu
Copy link
Contributor

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.

Reference issue on PrimeVue: primefaces/primevue#882

Affected components:

  • Dialog
  • BlockUI
  • Calendar
  • Galleria
  • Image
  • Sidebar
@cetincakiroglu cetincakiroglu added this to the 16.4.0 milestone Sep 25, 2023
@cetincakiroglu cetincakiroglu added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Sep 25, 2023
@cetincakiroglu cetincakiroglu self-assigned this Sep 25, 2023
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cetincakiroglu cetincakiroglu

Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Milestone
16.4.0
Development

No branches or pull requests
1 participant
@cetincakiroglu