[Silk UI Web] Nested SectionExpandable bug

[Silk UI Web] Nested SectionExpandable bug

  
Forge Component
(51)
Published on 2 Oct (3 weeks ago) by OutSystems R&D
51 votes
Published on 2 Oct (3 weeks ago) by OutSystems R&D

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!!