primeng
primeng copied to clipboard
Toggleable fieldset inside another toggleable fieldset has its content visible when collapsed by deafult
Describe the bug
When one toggleable fieldset has another toggleable fieldset inside and thay are both collapsed by default, and when expanding the first one, then the content of the inner one is visible even though it is collapsed.
Environment
Angular 14.1 PrimenNG 14 Windows
Reproducer
https://stackblitz.com/edit/github-trkcts-tjm2ed?file=src/app/app.component.html
Angular version
14.1.0
PrimeNG version
14.0.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
14.17.3
Browser(s)
Chrome 103.0.5060.134
Steps to reproduce the behavior
- go to https://github-trkcts-tjm2ed.stackblitz.io/ or https://stackblitz.com/edit/github-trkcts-tjm2ed?file=src/app/app.component.html
- expand first fieldset
- second fieldset is collapsed and its content is visible
Expected behavior
The content of second fieldset should be hidden when fieldset is collapsed.
The problem is when toggleable fieldset are nested one inside another.
This css is wrong:
.p-fieldset-toggleable.p-fieldset-expanded .p-toggleable-content:not(.ng-animating) {
overflow: visible;
}
The same error applies to panels, accordions and panelmenus and was introduced in commit f849e9d23b0c2223b6fbb516d3b0c368c927cf22.
Any news on that? I can't migrate to Angular 14 because of that.
Seeing this on nested p-panels. I've had to write ng-deep css to override it until a fix can be delivered
Might be fixed in 14.0.2 as https://github.com/primefaces/primeng/issues/11848 got closed with https://github.com/primefaces/primeng/pull/11856 at least for accordion
The fix for #11848 broke dropdowns inside accordions.
If a dropdown is bigger than the size of the accordion, its content isn't displayed entirely.
Instead of just removing the buggy css, something like that could be done :
.p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) {
overflow: visible;
}
The fix for #11848 broke dropdowns inside accordions.
If a dropdown is bigger than the size of the accordion, its content isn't displayed entirely.
Instead of just removing the buggy css, something like that could be done :
.p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) { overflow: visible; }
Did you mean:
.p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) {
overflow: unset;
}
This change corresponds to the workaround I provided for bug #11924
Hi,
So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!
Best Regards,
Still exist in 14.2
https://stackblitz.com/edit/primeng-password-demo-4mrybd?file=src/app/app.component.ts
@mertsincan I can't reopen issues
Hi @majkers,
The reproducer project is broken could you please update it so I can check?
The error I got;
Import error, can't find file:
/src/styles.css
@cetincakiroglu did you check link from my last comment? https://stackblitz.com/edit/primeng-password-demo-4mrybd?file=src%2Fapp%2Fapp.component.ts It is working just fine and is build with latest angular and PrimeNg