Hi
Can we adjust the weight/height of the drop list arrow on a dropdown in Perspective ?
Regards
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
In perspective, you can just add a height prop to the dropdownOptionStyle:
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.
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;
}
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 )