# Dropdown multi-selection

**URL:** <https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 14, 2024, 9:20am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352 "2024-05-14T09:20:01Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [May 14, 2024, 9:20am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/1 "2024-05-14T09:20:01Z")

</div>

Hello everyone, I have the following problem. When I use a dropdown list and allow multiple options, there are too many options in the small field. However, it is not possible to view the options because you cannot scroll or resize the window.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/f/0feddeee67eb6b22eda58e9725f24e5297a8f051.png)

My idea was to use two buttons and have them increase the size of the window on click and then decrease it again.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/a/6a1158877804177b650f86db05c0d8a7131a052e.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/85b6d93b90489f9be5378599b40d7545252c8d95.png)  
However, when I click on them, the data type of width and height changes from value to array and creates two arrays. This is my code and this is how width and height look like.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/4/7415f346910e9f504740a20dd3470b6654eab853.png)

```python
def runAction(self, event):
	self.getSibling("AAA").position.height = 100
	self.getSibling("AAA").position.width = 259,14

```

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 14, 2024, 9:24am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/2 "2024-05-14T09:24:24Z")

</div>

`POSITION.height : auto`

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [June 3, 2024, 5:02am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/3 "2024-06-03T05:02:46Z")

</div>

Sorry for the late response, I was on vacation. Can you tell me exactly what you mean by `POSITION.height.auto` and at which event I should write that? Is this a way for the size of the list to adjust automatically?"

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [June 3, 2024, 6:26am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/4 "2024-06-03T06:26:24Z")

</div>

I think this is what he means:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b61b382d7aafeeb61178234d15456fb2fe6caa3a.png)

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [June 3, 2024, 6:41am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/5 "2024-06-03T06:41:17Z")

</div>

I have now set _Ergebnis_ to auto, and the height now changes to this standard size. Can I also change the standard size so that it remains as large as the rest (here like _clients_)?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa79db8aaccf13aa7789c5b30139d1b427799e2e.png)

And if I have too many options, then the dropdown hides other dropdown lists. Can I compress these or should I expect that this can happen?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/5/c5712f9b3311bb553d823fb3cd5a9fdc36bcb163.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 3, 2024, 8:32am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/6 "2024-06-03T08:32:20Z")

</div>

Concerning the issue in the first post:  
You're not giving `width` and `height` integers, but arrays. How ? By using a comma instead of a dot. `259,14` is NOT a decimal number, it's two separate integers. The comma makes it a tuple, which you then assign to `width` or `height`, and ignition interprets this as an array. Replace the comma by a dot and the issue should go away.

Concerning the overlap of your components: if your components sizes can change dynamically, you need to account for this when placing other components.  
You seem to be using a coordinate container. You COULD keep using this, and calculate the sizes of everything, and use this to calculate the positions of your components...  
But I STRONGLY suggest you switch to a flex containers. Flex containers behavior is VERY different and you might find it difficult to work with them at first, because you can't place things manually in them, but believe me it will make your life much simpler in the long run.  
Take some time to get used to them. You can also find explanations on the internet, it's based on flexbox.  
Using flex containers, the positions of your different components will be automatically calculated and adjusted if other components are changed dynamically.

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [June 3, 2024, 9:17am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/7 "2024-06-03T09:17:35Z")

</div>

Thank you, I can now open and close it with the buttons. I forgot that in Germany, commas and periods are exactly the other way around. I am working on the project for my master's thesis, and I think I won't have enough time to change everything to flex container, but thank you for the tip!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 3, 2024, 9:21am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/8 "2024-06-03T09:21:21Z")

</div>

We have the same comma/dot situation in France, so I understand. It's always fun when you need merge data that comes from differently localized documents ;D

Try it on this page, you'll quickly see if it takes too long or not.  
In the long run, it might save you more time than the what you'll need to invest to first understand how it works.

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [June 3, 2024, 10:24am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/9 "2024-06-03T10:24:57Z")

</div>

I can imagine it 😂.  
I will try it, and then I will see what I do.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 3, 2024, 10:26am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/10 "2024-06-03T10:26:44Z")

</div>

Keep in mind you can add flex containers in a coordinate based page, if it makes things simpler for you (ie. your page contains a bunch of other things that are better served by a coordinate conatiner)

---

<div class="post-metadata">

**Author:** ![Rahul\_Bhakte1](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@Rahul\_Bhakte1](https://forum.inductiveautomation.com/u/Rahul_Bhakte1)\
**Post date:** [February 18, 2026, 1:30pm UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/11 "2026-02-18T13:30:50Z")

</div>

Hello @Transistor  
I am facing similar issue that how to see all selected options in small space.

I am not sure if I understood it right

> [@Transistor](#):
>
> POSITION.height : auto

I tried adding `height` in `POSITION` props and set to `auto` but it does not work. It seems it won’t allow custom props there.

Can we have scroll bar to view multi selected options like shown in below image?

or any other way to do so?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/64dd0bcc318cbe9c20a5b747fcff7da63810564f.png)

No option to add `height`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4f483a771df523b961d4a875bbf9ebd5908fee6a.png)

---

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [February 18, 2026, 1:56pm UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/12 "2026-02-18T13:56:55Z")

</div>

You're in a flex container, so no height. In your case, try setting basis to auto. (assuming that's a flex container set to "column" type...

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 18, 2026, 2:08pm UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/13 "2026-02-18T14:08:40Z")

</div>

My original reply works for coordinate container.  
As @tgarrison says, for a flex container in column mode you just set `POSITION.basis : auto`.

![Dropdown height auto](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/9462ccb775dbdbc728704b0a3e7f0c3d6a319739.gif)

---

<div class="post-metadata">

**Author:** ![Rahul\_Bhakte1](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@Rahul\_Bhakte1](https://forum.inductiveautomation.com/u/Rahul_Bhakte1)\
**Post date:** [February 19, 2026, 6:40am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/14 "2026-02-19T06:40:25Z")

</div>

That works, thanks.

Actually I am rendering the dropdown in a table column. I have to keep the row height fixed. In flex container the dropdown can grow only upto the height of the root container. After that, the same story.

I think I should use coordinate container to achieve what I want.

---

<div class="post-metadata">

**Author:** ![Jayvie\_Villaflores](https://avatars.discourse-cdn.com/v4/letter/j/91b2a8/32.png) [@Jayvie\_Villaflores](https://forum.inductiveautomation.com/u/Jayvie_Villaflores)\
**Post date:** [May 11, 2026, 4:54am UTC](https://forum.inductiveautomation.com/t/dropdown-multi-selection/90352/15 "2026-05-11T04:54:38Z")

</div>

Another fix for the overflow issue is by adding this custom CSS to your **Advanced Stylesheet** (`stylesheet.css`). This forces the dropdown's value container to stay within its bounds and adds a scrollbar when you have too many items selected:

.ia\_dropdown .iaDropdownCommon\_value-container {  
display: inline;  
overflow-y: auto;  
}