Toggleable fieldset inside another toggleable fieldset has its content visible when collapsed by deafult

majkers commented 2 years ago

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;
}

Smorgaz commented 2 years ago

The same error applies to panels, accordions and panelmenus and was introduced in commit f849e9d23b0c2223b6fbb516d3b0c368c927cf22.

majkers commented 2 years ago

Any news on that? I can't migrate to Angular 14 because of that.

Vernon-Accela commented 2 years ago

Seeing this on nested p-panels. I've had to write ng-deep css to override it until a fix can be delivered

majkers commented 2 years ago

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

krtek4 commented 2 years ago

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;
}

rosenthalj commented 2 years ago

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

mertsincan commented 2 years ago

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,

majkers commented 2 years ago

Still exist in 14.2

https://stackblitz.com/edit/primeng-password-demo-4mrybd?file=src/app/app.component.ts

majkers commented 2 years ago

@mertsincan I can't reopen issues

cetincakiroglu commented 2 years ago

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

majkers commented 2 years ago

@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

primefaces / primeng