[Silk UI Web] SectionExpandable CSS help

Forge Component
Published on 25 Feb (4 weeks ago) by OutSystems R&D
77 votes
Published on 25 Feb (4 weeks ago) by OutSystems R&D
On the SectionExpandable widget, the "carrot" icon (that either points UP or DOWN; close/open) is placed on the far-right side.

I'd like it to be on the left-most side just to the left of the title text.
I am sure this can be done with a bit of local/custom CSS to override the default - but - for the life of me I am having trouble pin-pointing the correct CSS to copy/customize into my local app CSS.

Any tips?


Hello Bruce,

You can use the following code to change icon for the left side

.SectionExpandable_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

.SectionExpandable__title.Heading2 {
    flex: 1;
    order: 2;    

.SectionExpandable__icon.Heading2 {
    width: auto;
    margin-right: 10px;
    transition: transform 250ms ease-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    order: 1;    

.SectionExpandable__icon.Heading2 .fa-fw {
    width: auto;

Best Regards,

José Rosário

Wow - that is like magic! I really need to learn more CSS ...

So, your code is so very very close to what I want --- just need to remove the line that is under the Title.

See the screen snip that I pasted here ... notice the yellow highlight. I want to remove that horizontal line.