# Dropdown Component

**URL:** <https://forum.inductiveautomation.com/t/dropdown-component/71307>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 20, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307 "2023-03-20T13:25:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [March 20, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/1 "2023-03-20T13:25:27Z")

</div>

Hi

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

Regards

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [March 20, 2023, 1:47pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/2 "2023-03-20T13:47:49Z")

</div>

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

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

```

Before and after  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d9f3f33961f4e070a96f6ad0c6b0ca4fd6ea096c.png)

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [March 20, 2023, 2:10pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/3 "2023-03-20T14:10:23Z")

</div>

In perspective, you can just add a _height_ prop to the dropdownOptionStyle:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/51b514d8e3b276ea45ae4f0387338090ba453bc7.png)

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [March 20, 2023, 2:32pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/4 "2023-03-20T14:32:40Z")

</div>

Hi Daniel,

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

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [March 20, 2023, 4:02pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/5 "2023-03-20T16:02:28Z")

</div>

Oh sorry, missed that part of your question.

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [March 20, 2023, 5:31pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/6 "2023-03-20T17:31:51Z")

</div>

In your stylesheet resource:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [March 20, 2023, 9:44pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/7 "2023-03-20T21:44:14Z")

</div>

> [@WillMT10](#):
>
> ```auto
> .ia_dropdown__expandIcon.material-icons.md-24 {
> width: 36px;
> height: 36px;
> stroke: black;
> stroke-width: 1;
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 21, 2023, 2:33am UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/8 "2023-03-21T02:33:36Z")

</div>

> [@Arnaud\_Declerck](#):
>
> 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.

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

```

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [March 21, 2023, 4:15pm UTC](https://forum.inductiveautomation.com/t/dropdown-component/71307/9 "2023-03-21T16:15:20Z")

</div>

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:

```auto
.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 😅)