# Change Dropdown Width

**URL:** <https://forum.inductiveautomation.com/t/change-dropdown-width/22809>\
**Category:** Ignition\
**Created:** [February 22, 2019, 4:42pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809 "2019-02-22T16:42:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Phil\_B](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@Phil\_B](https://forum.inductiveautomation.com/u/Phil_B)\
**Post date:** [February 22, 2019, 4:42pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/1 "2019-02-22T16:42:47Z")

</div>

Hello,

I have a dropdown component whose width is restricted in size. However the options for this dropdown are strings that are longer than the width of the drop. Is there a way to make the dropdown list wider? I just need to see the options when selecting one. i know it wont look right once i select it but that is ok.

![49A3655B](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/2491b48f8c1943c2d6cd61ddbddbe20a747ecde5.png)

---

<div class="post-metadata">

**Author:** ![scampbell](https://avatars.discourse-cdn.com/v4/letter/s/7cd45c/32.png) [@scampbell](https://forum.inductiveautomation.com/u/scampbell)\
**Post date:** [February 22, 2019, 4:45pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/2 "2019-02-22T16:45:30Z")

</div>

I also have this issue. Would be excited to finally have a solution.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 22, 2019, 5:16pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/3 "2019-02-22T17:16:15Z")

</div>

Didn’t get this working (the 8.0 look and feel complicates things, 7.9 might be easier), but here’s a starting point:

```auto
from javax.swing.plaf.basic import BasicComboBoxUI, BasicComboPopup

target = system.gui.getWindow("Main Window").rootContainer.getComponent("Dropdown")

targetUI = target.getUI().getClass()

class CustomComboPopup(BasicComboPopup):
  def __init__ (self, target):
    self.target = target
    BasicComboPopup. __init__ (self, target)

  def computePopupBounds(self, px, py, pw, ph):
    return BasicComboPopup.computePopupBounds(self, px, py, max(self.target.getPreferredSize().width, pw), ph)
    
class StyledComboBoxUI(targetUI):
  def createPopup(self):
    popup = CustomComboPopup(target)
    return popup

target.setUI(StyledComboBoxUI())

```

---

<div class="post-metadata">

**Author:** ![Phil\_B](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@Phil\_B](https://forum.inductiveautomation.com/u/Phil_B)\
**Post date:** [February 22, 2019, 5:28pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/4 "2019-02-22T17:28:39Z")

</div>

Thanks for the quick reply. I’ll play around with this when i get a few free moments. I am using 7.9. I guessing that I should put this script on something link the mouse pressed event script?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 22, 2019, 5:41pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/5 "2019-02-22T17:41:59Z")

</div>

You only want this to run once, so something like `windowOpened` at the window level would be more appropriate.

---

<div class="post-metadata">

**Author:** ![apollak](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@apollak](https://forum.inductiveautomation.com/u/apollak)\
**Post date:** [August 19, 2020, 6:34pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/6 "2020-08-19T18:34:10Z")

</div>

Thanks for this snippet! Seems to do exactly what I need. However, when attempting to use it in my scenario (with it on a mouse pressed event for testing) I get

`AttributeError: type object 'javax.swing.plaf.basic.BasicComboPopup' has no attribute 'computePopupBounds'`

I assume this is a configuration issue where my script can’t access the protected method. Are there any workarounds for this?

---

<div class="post-metadata">

**Author:** ![will\_d](https://avatars.discourse-cdn.com/v4/letter/w/3d9bf3/32.png) [@will\_d](https://forum.inductiveautomation.com/u/will_d)\
**Post date:** [October 2, 2020, 10:47pm UTC](https://forum.inductiveautomation.com/t/change-dropdown-width/22809/7 "2020-10-02T22:47:40Z")

</div>

I ran into the same issue that you did, but was able to resolve it by tweaking the code slightly. I was unable to achieve a “smart” sizing of the popup (i.e. - based on the length of the longest item in the list), but for my purposes, all I really wanted was a way to “force” the popup list to be a certain width, so maybe this _ **very rough** _ snippet will help you.

I put this code in a library called “Utils”:

```auto
from javax.swing.plaf.basic import BasicComboBoxUI, BasicComboPopup
def setCustomWidthComboPopup(comp, width):
	targetUI = comp.getUI().getClass()
	
	class CustomComboPopup(BasicComboPopup):
		def __init__ (self, target):
			self.target = target
			BasicComboPopup. __init__ (self, target)
			
		def computePopupBounds(self, px, py, pw, ph):
			return self.super__computePopupBounds(px, py, width, ph)
	
	class StyledComboBoxUI(targetUI):
		def createPopup(self):
			popup = CustomComboPopup(comp)
			return popup
			
	comp.setUI(StyledComboBoxUI())

```

Then, in the **visionWindowOpened** event handler for my window, I added these lines:

```auto
win = system.gui.getParentWindow(event)

#Get the dropdown component
comp = win.getComponentForPath('Root Container.MetaContainer.MyDropDown')

#Call the 'customWidth' function once on window open
#This example uses a 'static' width of 400, but it could also be 
#some value calculated at runtime, however you'd have to call this function
#again if you want to change it
Utils.setCustomWidthComboPopup(comp, 400)

```

Some limitations of this quick and dirty implementation:

- As I mentioned, it doesn’t do any fancy ‘auto-sizing’ of the dropdown popup
- The dropdown popup is still left-aligned with the dropdown itself (i.e. - it grows to the right). I’m sure if someone wanted it to be right-aligned with the dropdown box, that could be achieved, but I didn’t put in the effort

I’m sure someone with more time/skills could improve upon this.

Edit: this worked on v8.0.15