SectionExpandable Cascading 

SectionExpandable Cascading 

  


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

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

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

Hi Leonardo,

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

Greetings,

Andy