# Change Vision Dropdown Component to show items above component as well

**URL:** <https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [October 24, 2019, 11:59pm UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382 "2019-10-24T23:59:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 24, 2019, 11:59pm UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/1 "2019-10-24T23:59:32Z")

</div>

I'm hoping that this will be possible by changing the ComboBox renderer or model..

We have an HMI and a drop down component on a popup. We have already increased the height of the underlying combobox items by modifying the renderer and the model to accommodate "fat fingers". However, our customer has also asked if it's possible to have the items list span the height of the screen so they can more easily select items from a list that has ~30-40 items in it without always having to click many times on the scrollbar.

I'd like to go from the 1st image (normal display) to the 2nd image:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/41dd0c68a6c132cd1551118eddca2d40fa57d990.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c73bec863fdc7918f5509782c8c370fd9c8a8ceb.png)

E.g. the listbox is extended to the **top** and **bottom** of the screen, effectively covering the combobox itself.

Thanks in advance!

Link to existing script to change the renderer and model to increase height:

> [@Dropdown List (PMIComboBox): Disable item from selection](http://forum.inductiveautomation.com/t/dropdown-list-pmicombobox-disable-item-from-selection/23697/3):
>
> [image] [image] So I’ve worked it out with help from these two posts: (1) [swing - Java: Make one item of a jcombobox unselectable(like for a sub-caption) and edit font of that item - Stack Overflow](https://stackoverflow.com/questions/28344126/java-make-one-item-of-a-jcombobox-unselectablelike-for-a-sub-caption-and-edit/28344521#28344521) (2) [Anyway to make drop down table bigger for touchscreen projects? - #5 by PGriffith](http://forum.inductiveautomation.com/t/anyway-to-make-drop-down-table-bigger-for-touchscreen-projects/15045/5) Nothing like hacking until you get it! PS. I’ve kept the code in there to also be able to increase the height of the items by setting the ‘scale’ property. This scales the item height by the scale value (1 = no…

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 25, 2019, 12:27am UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/2 "2019-10-25T00:27:38Z")

</div>

Consider faking it with a label and icon that _looks_ like a drop-down, but instead just makes a listbox visible on top of everything. Selection in the listbox writes the new value back to the fake dropdown and hides itself again. (:

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 25, 2019, 12:36am UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/3 "2019-10-25T00:36:22Z")

</div>

I did consider this, however I’d like to use this solution for other projects as well, so it would be nice to just be able to add it into my existing class that edits the renderer & model. I’d also like to use it for more than just one drop down so it’d be far cleaner with a scripted solution 🤞  
I also can’t use this as the dropdown is actually included within a template that has limited height, which is embedded onto the popup window. It’s only maybe 20% the height of the popup, and 15% the height of the screen.

---

<div class="post-metadata">

**Author:** ![weixionglichina](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/weixionglichina/32/10650_2.png) [@weixionglichina](https://forum.inductiveautomation.com/u/weixionglichina)\
**Post date:** [October 25, 2019, 12:47am UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/4 "2019-10-25T00:47:33Z")

</div>

They should enhance more features, I am considering if we are able to use third part UI module like Bootstrap to beautify our pages.

---

<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:** [October 25, 2019, 3:30pm UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/5 "2019-10-25T15:30:33Z")

</div>

If you _reallly_ want it to be reusable, you could make it a custom module 🙂  
That also gets you some significant benefits in terms of customization that just aren’t possible from the runtime.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 25, 2019, 7:27pm UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/6 "2019-10-25T19:27:30Z")

</div>

I’d like to try making a module, but I just don’t have the Java knowledge I think I’d need ☹. So I’m guessing it’s not possible from the runtime? (Or too difficult)

---

<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:** [October 25, 2019, 7:37pm UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/7 "2019-10-25T19:37:59Z")

</div>

Theoretically, I believe the “right” way to extend it would be to set a custom UI class on the comboboxes you want to open in this mode - that custom UI would override the dimension settings and force the combobox to take up the full screen height. See the second example here: [https://stackoverflow.com/a/956078](https://stackoverflow.com/a/956078)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 25, 2019, 8:09pm UTC](https://forum.inductiveautomation.com/t/change-vision-dropdown-component-to-show-items-above-component-as-well/29382/8 "2019-10-25T20:09:20Z")

</div>

Awesome, I’ll have a look, thanks 🙂
