SectionExpandable Cascading 
Question


Hello,

I have a SectionExpandable inside a SectionExpandable. The outer one closes nicely but the internal one doesn’t, it leaves half of the first row visible, and doesn’t reverse the “^” on close (please, check the image above), is there a quick CSS fix to that?


Thanks,

Andy

mvp_badge
MVP
Solution

Hello Andy.

This is really a CSS problem in SilkUI. I have notified the team, so hopefully it will be fixed in the future.

Meanwhile, you can add the following CSS to your theme to fix this 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;
}


.SectionExpandable:not(.expanded) > .SectionExpandable_header > .SectionExpandable__icon {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}
.SectionExpandable:not(.expanded) > .SectionExpandable_content {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
    visibility: visible;
}
mvp_badge
MVP

Hi Andy. Could you attach an example module showing your problem?

From your description, it seems that it won't be a CSS problem, but rather a javascript problem. But with an example, we can know for sure, and maybe come up with a solution :)

Hi Leonardo,

I'm attaching the .oml sample file thanks.

Please let me know if the file got through, the WebScreen with the sample is: 

NoEntityExpInEx

CascadingSectionExpandable.oml

mvp_badge
MVP
Solution

Hello Andy.

This is really a CSS problem in SilkUI. I have notified the team, so hopefully it will be fixed in the future.

Meanwhile, you can add the following CSS to your theme to fix this 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;
}


.SectionExpandable:not(.expanded) > .SectionExpandable_header > .SectionExpandable__icon {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}
.SectionExpandable:not(.expanded) > .SectionExpandable_content {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
    visibility: visible;
}

Hi Leonardo,

that's great service, the code fixes the problem. Appreciate the fast response!

Greetings,

Andy

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.