Dropdown Component

Hi

Can we adjust the weight/height of the drop list arrow on a dropdown in Perspective ?

Regards

You can use shape/stroke under the style prop of the component to adjust the "size" somewhat.

{
  "classes": "",
  "stroke": "#D5D5D5",
  "strokeWidth": 3
}

Before and after
image

In perspective, you can just add a height prop to the dropdownOptionStyle:
image

Hi Daniel,

That just increase the height of the options list but not from the arrow.
At least in 8.1.25

Oh sorry, missed that part of your question.

In your stylesheet resource:

.ia_dropdown__expandIcon.material-icons.md-24 {
	width: 36px;
	height: 36px;
	stroke: black;
	stroke-width: 1;
}

You likely don't need all 4 of those properties, but they're to show what you can play with. Note that this will impact all dropdown components in your project.

2 Likes

This work like a charm. I suppose we could target specific dropdown by using the domId ?

Yes, that is how you would do it. Given a Dropdown where you've specified Dropdown.meta.domId = "myTargetDomId", you would do this:

Edit: added a space between the top level which would have the domId value and the class which the internal svg would have.

#myTargetDomId .ia_dropdown__expandIcon {
	width: 36px;
	height: 36px;
	stroke: black;
	stroke-width: 1;
}
2 Likes

I'll just point out one other option. If you want to be able to easily target more than one dropdown you can create a custom style and apply it to the dropdown component. The style can be completely empty, it's just needed for targeting purposes in the stylesheet resource.

Example would be you create a custom style called dropdown_arrow, add it as a class on the dropdown components you want to target, and then have this in your stylesheet resource:

.psc-dropdown_arrow .ia_dropdown__expandIcon {
	width: 36px;
	height: 36px;
	stroke: black;
	stroke-width: 1;
}

This makes it a bit easier to manage than the domId's in my opinion - but only if you expect to target more than one dropdown.

(Thanks @cmallonee for catching that just the .ia_dropdown__expandIcon class was necessary and could leave off .material-icons.md-24. Still trying to chip away at my understanding of CSS...feels a bit like latin at times :sweat_smile:)

1 Like