[Silk UI Web] Nested SectionExpandable bug

[Silk UI Web] Nested SectionExpandable bug

  
Forge Component
(64)
Published on 14 Jun by OutSystems Labs
64 votes
Published on 14 Jun by OutSystems Labs

Hi. This forum post identified this problem with nested SectionExpandable:

https://www.outsystems.com/forums/discussion/25878/sectionexpandable-cascading/


If you use a SectionExpandable inside another SectionExpandable, some styles of the parent SectionExpandable leak into the nested one. This makes the collapsing not work as intended.

The cause is on the following CSS:


.SectionExpandable.expanded .SectionExpandable__icon {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
}


.SectionExpandable.autoheight .SectionExpandable_content {
    display: block;
    height: auto !important;
    -webkit-transition: 0;
            transition: 0;
}


.SectionExpandable.expanded .SectionExpandable_content {
    display: block;
    height: auto;
    overflow: visible;
    padding: 10px;
    visibility: visible;
}


A descendant selector is being used, while it should have been a direct descendant (>). Making these changes fixes the problem:


.SectionExpandable.expanded > .SectionExpandable_header > .SectionExpandable__icon {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

.SectionExpandable.autoheight > .SectionExpandable_content {
    display: block;
    height: auto !important;
    -webkit-transition: 0;
            transition: 0;
}

.SectionExpandable.expanded > .SectionExpandable_content {
    display: block;
    height: auto;
    overflow: visible;
    padding: 10px;
    visibility: visible;
}

Thanks Leonardo!!