# Dropdown Stretching Issue

**URL:** <https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 6, 2026, 3:27pm UTC](https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816 "2026-02-06T15:27:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [February 6, 2026, 3:27pm UTC](https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816/1 "2026-02-06T15:27:19Z")

</div>

I have been working on this dropdown for a while now and for some reason when I click it to select and input, the entire body of the dropdown component stretches when it shouldn’t. I have the name and dropdown component in a flex container that is then wrapped around another flex container that has other components in it. Am I missing anything or doing anything wrong?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52dd7be08049bd865dcc2af7180d75b7c97aec18.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/821e6f6f7ddd23feedd3b2b760338d0e3155ecf7.png)

Parent flex container that wraps around the other inputs:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/8/186d8a0d7807f2d5a7f3323e924821606b42bd05.png)

Flex container that wraps around each input component and their label:

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

The card-3 Class just formats the padding and border radius

Thank you for your help!

---

<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:** [February 6, 2026, 3:52pm UTC](https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816/2 "2026-02-06T15:52:49Z")

</div>

I've seen this when using a dropdown with position → basis set to auto.

---

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [February 6, 2026, 3:56pm UTC](https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816/3 "2026-02-06T15:56:54Z")

</div>

See, that’s what I thought so I set it to 40px using a style variable

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

It sadly did not work

---

<div class="post-metadata">

**Author:** ![Xander\_Dawson-Fink](https://avatars.discourse-cdn.com/v4/letter/x/73ab20/32.png) [@Xander\_Dawson-Fink](https://forum.inductiveautomation.com/u/Xander_Dawson-Fink)\
**Post date:** [February 6, 2026, 4:17pm UTC](https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816/4 "2026-02-06T16:17:25Z")

</div>

I haven’t tried this, but with a style (component.props.style or as a class on the stylesheet), you may be able to set maxWidth to either min-content, max-content, or fit-content.

Here’s a link to some [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/max-width)

As a note, Ignition (I think somebody mentioned that it was ReactJS, specifically) allows for camelCase instead of kebab-case for declaring CSS attributes, but I don’t think within values. So maxWidth = max-width, but minContent != min-content

---

<div class="post-metadata">

**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\
**Post date:** [February 6, 2026, 5:24pm UTC](https://forum.inductiveautomation.com/t/dropdown-stretching-issue/113816/5 "2026-02-06T17:24:38Z")

</div>

That Worked!!! Thank You!