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

Conflict between picklist used inputicon-style and table loading mask #17263

Open
4 tasks
egorbwork opened this issue Dec 30, 2024 · 3 comments · May be fixed by #17261
Open
4 tasks

Conflict between picklist used inputicon-style and table loading mask #17263

egorbwork opened this issue Dec 30, 2024 · 3 comments · May be fixed by #17261
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone
19.1.0

Comments

@egorbwork
Copy link

Describe the bug

When the primeng table datatable mask is used, its styles are overriden by the p-overlay-mask that is loaded from base styles later. An example: We are using the table and in a dynamic dialog or popover with ngTemplate we used the picklist with filterBy. After we open modal|popover, table mask changes from position absolute to position fixed and blocks entire screen on lazy loading.

before:
image
after:
image

Pull Request Link

#17261

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-7en3trgo?file=src%2Fapp%2Fapp.component.html

Environment

ubuntu 22, firefox,

Angular version

19

PrimeNG version

v19

Node version

No response

Browser(s)

firefox 133

Steps to reproduce the behavior

  1. Add a p-table on the page and set loading flag usage for it
  2. Add a popover(with ng-template) or dynamic dialog with picklist that have filterBy option enabled
  3. Open the dialog or popover with picklist and close it
  4. toggle loading status for the table.
    Result: The datatable-overlay is fixed instead of absolute.

Expected behavior

The datatable-overlay should remain fixed, after any base style components loading.
@egorbwork egorbwork added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 30, 2024
@egorbwork egorbwork linked a pull request Dec 30, 2024 that will close this issue
Open
@benoitjry
Copy link

benoitjry commented Jan 10, 2025 •
edited
Loading

image

Happens same with the icon

My fixes :

.p-datatable-mask.p-overlay-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.p-datatable-loading-icon.p-icon{
  font-size: var(--datatable-loading-icon-size);
  width: var(--datatable-loading-icon-size);
  height: var(--datatable-loading-icon-size);
}

@egorbwork
Copy link
Author

image

Happens same with the icon

My fixes :

.p-datatable-mask.p-overlay-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.p-datatable-loading-icon.p-icon{
  font-size: var(--datatable-loading-icon-size);
  width: var(--datatable-loading-icon-size);
  height: var(--datatable-loading-icon-size);
}

Thank you, added similar changes in the pull-request.

@BeGj
Copy link
Contributor

BeGj commented Jan 12, 2025 •
edited
Loading

Thank you @egorbwork for reporting this issue, and also providing a temporary fix.
For us we added

.p-datatable-mask.p-overlay-mask {
    position: absolute;
}

in our styles.scss to fix the issue on our end.

(Our issue was that the loading mask on tables did not contain itself to the table, but spanned across the whole interface (outside the table it was supposed to).

Environment: angular 19, primeng 19.0.3/4/5 + tailwindcss....

@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 15, 2025
@mertsincan mertsincan added this to the 19.0.6 milestone Jan 15, 2025
@github-project-automation github-project-automation bot moved this to Review in PrimeNG Jan 15, 2025
@mertsincan mertsincan modified the milestones: 19.0.6, 19.1.0 Jan 15, 2025
@mertsincan mertsincan moved this from Review to Theme in PrimeNG Jan 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
PrimeNG
Status: Theme
Milestone
19.1.0
Development

Successfully merging a pull request may close this issue.

fix: Fixes #17263 datatable mask conflict with base overlay styles egorbwork/primeng-fixes
4 participants
@BeGj @mertsincan @egorbwork @benoitjry