Skip to main content
J
JO_993058514-Alexandrite
14-Alexandrite
June 14, 2021
Question

rotate carrot on dropdown widget

  • June 14, 2021
  • 3 replies
  • 2402 views

The default carrot on a drop down faces downward. I would like the carrot to face to the right when the dropdown is closed and downward when it is open. Is this possible with CSS styling and non custom widgets?

3 replies

A
abjain15-Moonstone
15-Moonstone
June 15, 2021

@JO_9930585 Add a value for the CustomClass property for the dropdown widget. When you inspect the dropdown widget after adding the custom class it looks like following('abnew' is the customclass I added):

abjain_0-1623742141155.png

You can select and apply custom css in the mashup to the carrot icon(element highlighted in grey) using the following Css :

.abnew .widget-ptcsdropdown::part(icon){
transform: rotate(0deg) ;
}

 

J
JO_993058514-AlexandriteAuthor
14-Alexandrite
June 15, 2021

@abjain  Thanks for the reply. Unfortunately I have already tried this with no luck. I tried 90deg and 180deg as well. Any idea why this isn't working for me. Here are my exact steps...

1) create dropdown widget

2) add custom class name as "time-selector"

3) bind data to the dropdown

4) add css to try and change the styling as below.. The select-box styling works and the icon styling does work if I do something simple like add a color to the icon. So this is most likely related to the "transform: 0deg" line.

 

 

.time-selector .widget-ptcsdropdown::part(select-box){
 background: #E7E7E7 0% 0% no-repeat padding-box !important;
 border-radius: 5px !important;
 opacity: 1 !important;
}

.time-selector .widget-ptcsdropdown::part(icon){
	transform: rotate(0deg) !important;
}

 

I have tried variations without "!imortant" and with diffferent angles like 90deg and 180deg.

J
JO_993058514-AlexandriteAuthor
14-Alexandrite
June 15, 2021

@abjain  And here is the html in chrome dev tools. The transform says 90deg even though I set it to 0deg. So it seems to not be working properly?...

Capture.PNG

S
slangleyCommunity Manager
Community Manager
June 24, 2021

Hi @JO_9930585.

 

If you feel you have received a answer to your question, please mark the appropriate response as the Accepted Solution for the benefit of others with the same question.

 

Regards.

 

--Sharon

G
GabrielB12-Amethyst
12-Amethyst
August 20, 2021

Hi @JO_9930585 ,

 

The problem is that the ShadowDOM part has the transform inline, instead of a generated CSS selector. All the CSS you write with ::part() generates variables. Variables don't transfer the "!important" part of your rule. They only retain the value. For example if your variable is "rotate(0deg) !imporant" it will only read "rotate(0deg)". And given the fact that the transform is inline, there is no way to overwrite it but with an "!important". And there is no way to do that.

GabrielB_0-1629445612286.png

You can see here that rotate(90deg) is the inline. Next one is my "::part(icon) { transform: rotate(0deg) !important}" rule and it still won't overwrite it. The whole point of these ShadowDOM widgets was to not write inline CSS on them like the old ones.

 

BUT, there is a fix for this. I've done this in 9.2, so I hope it works for you.

 

 

.ogDropdown .widget-ptcsdropdown::part(icon)::part(image) {
 transform: rotate(-90deg);
}

 

 

ogDropdown is my CustomClass on the widget. What I've done here is go a level deeper into that "icon" part to the "image".

GabrielB_1-1629447255390.png

The output CSS looks something like this, which is the most hideous thing you've ever seen, but... it works.

GabrielB_2-1629447345247.png

 

 

Good luck!

Terms & ConditionsCookie settingsAccessibility statement