[Silk UI Web] SectionExpandable CSS help

[Silk UI Web] SectionExpandable CSS help

  
Forge Component
(47)
Published on 11 Nov (4 weeks ago) by OutSystems Labs
47 votes
Published on 11 Nov (4 weeks ago) by OutSystems Labs
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?

Thanks!

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.

Thanks!