# Make drop down menu always expanded

**URL:** <https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 11, 2023, 11:20am UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326 "2023-10-11T11:20:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [October 11, 2023, 11:20am UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/1 "2023-10-11T11:20:55Z")

</div>

Hi Folks,

I would like to make the perspective dropdown menu always expanded

@pturmel We can continue discussion here if you like

---

<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:** [October 11, 2023, 11:31am UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/2 "2023-10-11T11:31:47Z")

</div>

Then why do you even want a dropdown ?  
If it's always expended, it's pretty much just a stack of buttons...

---

<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:** [October 11, 2023, 11:58am UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/3 "2023-10-11T11:58:43Z")

</div>

The problem is addressed here:

> [@Focus Event not working](https://forum.inductiveautomation.com/t/focus-event-not-working/77845/13):
>
> But at least it will be right and standard GUI. What you're trying to do is just wrong. Use the table as @pturmel suggested and style the table to look the same as the dropdown. enableHeader : false pager.top : false pager.bottom : false rows.striped.enabled : false

---

<div class="post-metadata">

**Author:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [October 11, 2023, 12:17pm UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/4 "2023-10-11T12:17:31Z")

</div>

I need the search function. Too many items. I made the drop down take 100% of the page with a custom CSS but I need it expanded all the time

Or recommend me another component that takes the same shape and support search function

---

<div class="post-metadata">

**Author:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [October 11, 2023, 12:24pm UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/5 "2023-10-11T12:24:28Z")

</div>

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

I want to make a list like the great one done by @nader.chinichian  
I though of that method of doing it  
(drop down menu \> make it 100% of the page (done) \> make it always expanded)

@nader.chinichian if the image contains any copyrights or you don't like it to be shared let me know and I will remove it instantly

---

<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:** [October 11, 2023, 12:50pm UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/6 "2023-10-11T12:50:12Z")

</div>

> [@John\_Morgan1](#):
>
> and support search function

Table again.

```auto
enableHeader : false
pager.top : false
pager.bottom : false
rows.striped.enabled : false
filter.enabled : true <<<<----------

```

![Filter table](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/d/7dba4a51cedb4a05470aa73933640fa87f8b7e1d.gif)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 11, 2023, 12:52pm UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/7 "2023-10-11T12:52:17Z")

</div>

It is not dropdown lost. It is combination of text input field and tree components that work together

What ever you type in text field cause a trigger on tree binding to generate new tree base on that filter area from database. As I use database filtering is very easy.

---

<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:** [October 11, 2023, 1:01pm UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/8 "2023-10-11T13:01:55Z")

</div>

text field + table/flex repeater, use the text field to filter the table/flex repeater.  
Don't hack built-in components to do something that can be done so simply by combining other built-in bricks.

> **json**
>
> ```json
> {
> "custom": {},
> "params": {},
> "propConfig": {
> "custom.foo": {
> "persistent": false
> }
> },
> "props": {
> "defaultSize": {
> "height": 750,
> "width": 280
> }
> },
> "root": {
> "children": [
> {
> "children": [
> {
> "meta": {
> "name": "TextField"
> },
> "position": {
> "grow": 1
> },
> "props": {
> "deferUpdates": false,
> "style": {
> "background": "none",
> "border": "none",
> "color": "--neutral-20"
> }
> },
> "type": "ia.input.text-field"
> },
> {
> "meta": {
> "name": "Button"
> },
> "position": {
> "basis": "24px"
> },
> "props": {
> "image": {
> "icon": {
> "path": "material/refresh"
> }
> },
> "style": {
> "background": "none",
> "border": "none"
> },
> "text": ""
> },
> "type": "ia.input.button"
> }
> ],
> "meta": {
> "name": "search_field"
> },
> "position": {
> "basis": "32px",
> "shrink": 0
> },
> "props": {
> "style": {
> "border": "solid 1px lightblue",
> "border-radius": 5
> }
> },
> "type": "ia.container.flex"
> },
> {
> "custom": {
> "data": [
> {
> "city": "Folsom",
> "country": "United States",
> "population": 77271
> },
> {
> "city": "Helsinki",
> "country": "Finland",
> "population": 635591
> },
> {
> "city": "Jakarta",
> "country": "Indonesia",
> "population": 10187595
> },
> {
> "city": "Madrid",
> "country": "Spain",
> "population": 3233527
> },
> {
> "city": "Prague",
> "country": "Czech Republic",
> "population": 1241664
> },
> {
> "city": "San Diego",
> "country": "United States",
> "population": 1406630
> },
> {
> "city": "San Francisco",
> "country": "United States",
> "population": 884363
> },
> {
> "city": "Shanghai",
> "country": "China",
> "population": 24153000
> },
> {
> "city": "Tokyo",
> "country": "Japan",
> "population": 13617000
> },
> {
> "city": "Washington, DC",
> "country": "United States",
> "population": 658893
> },
> {
> "city": "Wellington",
> "country": "New Zealand",
> "population": 405000
> },
> {
> "city": "Delhi",
> "country": "India",
> "population": 11034555
> },
> {
> "city": "Dhaka",
> "country": "Bangladesh",
> "population": 14399000
> },
> {
> "city": "Lagos",
> "country": "Nigeria",
> "population": 16060303
> },
> {
> "city": "Karachi",
> "country": "Pakistan",
> "population": 14910352
> },
> {
> "city": "Istanbul",
> "country": "Turkey",
> "population": 14025000
> },
> {
> "city": "Cairo",
> "country": "Egypt",
> "population": 10230350
> },
> {
> "city": "Mexico City",
> "country": "Mexico",
> "population": 8974724
> },
> {
> "city": "London",
> "country": "United Kingdom",
> "population": 8825001
> },
> {
> "city": "New York City",
> "country": "United States",
> "population": 8622698
> },
> {
> "city": "Tehran",
> "country": "Iran",
> "population": 8154051
> },
> {
> "city": "Bogota",
> "country": "Colombia",
> "population": 7878783
> },
> {
> "city": "Rio de Janeiro",
> "country": "Brazil",
> "population": 6429923
> },
> {
> "city": "Riyadh",
> "country": "Saudi Arabia",
> "population": 5676621
> },
> {
> "city": "Singapore",
> "country": "Singapore",
> "population": 5535000
> },
> {
> "city": "Saint Petersburg",
> "country": "Russia",
> "population": 5191690
> },
> {
> "city": "Sydney",
> "country": "Australia",
> "population": 208374
> },
> {
> "city": "Abidjan",
> "country": "Ivory Coast",
> "population": 4765000
> },
> {
> "city": "Dar es Salaam",
> "country": "Tanzania",
> "population": 4364541
> },
> {
> "city": "Wellington",
> "country": "New Zealand",
> "population": 405000
> },
> {
> "city": "Los Angeles",
> "country": "United States",
> "population": 3884307
> },
> {
> "city": "Berlin",
> "country": "Germany",
> "population": 3517424
> },
> {
> "city": "Jeddah",
> "country": "Saudi Arabia",
> "population": 3456259
> },
> {
> "city": "Kabul",
> "country": "Afghanistan",
> "population": 3414100
> },
> {
> "city": "Mashhad",
> "country": "Iran",
> "population": 3001184
> },
> {
> "city": "Milan",
> "country": "Italy",
> "population": 1359905
> },
> {
> "city": "Kiev",
> "country": "Ukraine",
> "population": 2908703
> },
> {
> "city": "Rome",
> "country": "Italy",
> "population": 2877215
> },
> {
> "city": "Chicago",
> "country": "United States",
> "population": 2695598
> },
> {
> "city": "Osaka",
> "country": "Japan",
> "population": 2691742
> },
> {
> "city": "Bandung",
> "country": "Indonesia",
> "population": 2575478
> },
> {
> "city": "Managua",
> "country": "Nicaragua",
> "population": 2560789
> },
> {
> "city": "Paris",
> "country": "France",
> "population": 2229621
> },
> {
> "city": "Shiraz",
> "country": "Iran",
> "population": 1869001
> },
> {
> "city": "Manila",
> "country": "Philippines",
> "population": 1780148
> },
> {
> "city": "Montreal",
> "country": "Canada",
> "population": 1649519
> },
> {
> "city": "Guadalajara",
> "country": "Mexico",
> "population": 1495189
> },
> {
> "city": "Dallas",
> "country": "United States",
> "population": 1317929
> },
> {
> "city": "Yerevan",
> "country": "Armenia",
> "population": 1060138
> },
> {
> "city": "Tunis",
> "country": "Tunisia",
> "population": 1056247
> }
> ]
> },
> "meta": {
> "name": "Table"
> },
> "position": {
> "grow": 1
> },
> "propConfig": {
> "props.data": {
> "binding": {
> "config": {
> "struct": {
> "data": "{this.custom.data}",
> "filter": "{../search_field/TextField.props.text}"
> },
> "waitOnAll": true
> },
> "transforms": [
> {
> "code": "\treturn filter(lambda x: value.filter in x[\u0027city\u0027], value.data)",
> "type": "script"
> }
> ],
> "type": "expr-struct"
> }
> }
> },
> "props": {
> "bodyStyle": {
> "background-color": "--neutral-90",
> "color": "--neutral-20"
> },
> "columns": [
> {
> "align": "center",
> "boolean": "checkbox",
> "dateFormat": "MM/DD/YYYY",
> "editable": false,
> "field": "city",
> "footer": {
> "align": "center",
> "justify": "left",
> "style": {
> "classes": ""
> },
> "title": ""
> },
> "header": {
> "align": "center",
> "justify": "left",
> "style": {
> "classes": ""
> },
> "title": ""
> },
> "justify": "auto",
> "number": "value",
> "numberFormat": "0,0.##",
> "progressBar": {
> "bar": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "max": 100,
> "min": 0,
> "track": {
> "color": "",
> "style": {
> "classes": ""
> }
> },
> "value": {
> "enabled": true,
> "format": "0,0.##",
> "justify": "center",
> "style": {
> "classes": ""
> }
> }
> },
> "render": "auto",
> "resizable": true,
> "sort": "none",
> "sortable": true,
> "strictWidth": false,
> "style": {
> "classes": ""
> },
> "toggleSwitch": {
> "color": {
> "selected": "",
> "unselected": ""
> }
> },
> "viewParams": {},
> "viewPath": "",
> "visible": true,
> "width": ""
> }
> ],
> "emptyMessage": {
> "style": {
> "background-color": "--neutral-90"
> }
> },
> "enableHeader": false,
> "pager": {
> "bottom": false
> },
> "rows": {
> "striped": {
> "enabled": false
> }
> },
> "style": {
> "border": "none"
> }
> },
> "type": "ia.display.table"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column",
> "style": {
> "background-color": "--neutral-90",
> "padding": "3px"
> }
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [October 11, 2023, 1:49pm UTC](https://forum.inductiveautomation.com/t/make-drop-down-menu-always-expanded/80326/9 "2023-10-11T13:49:09Z")

</div>

@nader.chinichian  
@Transistor  
@pascal.fragnoud  
@pturmel

I really appreciate your help a lot. Thank you 🌷🌷