Dropdown Component

Ignition
,
1

Hi

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

Regards

2

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

3

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

4

Hi Daniel,

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

5

Oh sorry, missed that part of your question.

6

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
7

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

8

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
9

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