Move collapsible-panel dropdown button to the left side

UI Builder
1

I am using collapsible-panel and have been asked if I can move the dropdown “carrot” from the right side to the left side.

image
image803×230 2.17 KB

Thanks,
H

2

Hello @hharrington,

you can do it by setting property flex-direction: row-reverse; to the .panel-title class.

3

Thanks for your response, would I set this using “class list logic” for the panel?, or does this go somewhere else ?

thanks,
H

4

Hi @hharrington,

you can set a class for your component here:

image
image526×1006 37.4 KB

And then create a Theme extension to put these lines into:

.your-class-here {
  .panel-title {
    flex-direction: row-reverse;
  }
}

Rename your-class-here to whatever you want.

Please see this video from Mark about UI themes and extensions. This will give you an idea of how to customize your app and also how to create custom extensions:

Regards,
Stanislaw

5

Thanks!

I figured it had to be via an extension but could not figure out how to add it.

Thanks for the link to the themes in ui builder video it was helpful to get more background on how to theme.

H

1 Like