# Dropdown Popup over flex container

**URL:** <https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 21, 2023, 6:21pm UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212 "2023-11-21T18:21:50Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [November 21, 2023, 6:21pm UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/1 "2023-11-21T18:21:50Z")

</div>

I want to implement something like below screenshot (from this forum, when creating a topic), alternative for multi-select of dropdown:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9a95f0fd6c8252624154f24f678f9b84d8d10667.png)

On flex container I have my dropdown component.  
when this is click, i want to show the popup just below the dropdown component.

I cannot find the position of dropdown component in flex container? for the popup position to co-related with dropdown position.

---

<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:** [November 21, 2023, 6:54pm UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/2 "2023-11-21T18:54:30Z")

</div>

> [@Eugene49](#):
>
> I cannot find the position of dropdown component in flex container? for the popup position to co-related with dropdown position.

That component is probably written in Javascript by the Discourse forum software. You are correct that you can't find a component position in a flex layout in Perspective.

What's the real problem that you are trying to solve? The dropdown with,  
`multiSelect : true`  
`search.enabled : true`  
should do most of what you need.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [November 21, 2023, 7:37pm UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/3 "2023-11-21T19:37:02Z")

</div>

A fancy display to be able to see which options are selected on the dropdown.

Here is the post the describe the limitation of current dropdown component:

> [@Perspective Dropdown Multi Select](https://forum.inductiveautomation.com/t/perspective-dropdown-multi-select/62588):
>
> I have dropdown configured for the a days of week selection in a table. The user experience is not great, as there is not enough space to show all the pills selected. See below: [image] All weekdays are actually selected in the bottom example, but there’s no way to see that. I’ve seen other dropdown multi selection elsewhere that solves this problem as follows: [image] Is there a way to solve this in Perspective, or is it feature request time?

I was about to use a popup over a flex container, but faced a hard wall since I cannot get dropdown position, so I cannot place popup just below the dropdown.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [November 21, 2023, 8:23pm UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/4 "2023-11-21T20:23:46Z")

</div>

You could build this using a container with position `absolute` (so it lives out of the regular flex flow and on top the other DOM elements), and a binding on the `display` property.

---

<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:** [November 21, 2023, 10:04pm UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/5 "2023-11-21T22:04:10Z")

</div>

I tried playing with the position but in the end it doesn't really matter, the only way I found to make it work is to set `overflow: visible` on the component itself AND its instances when you place them in a view. That's it, that's all you need.  
The component itself can be flex or coordinate, doesn't matter.  
You'll also need to make sure its z-index is lower than what's under the dropdown, otherwise it won't cover it. Or, you know, just click this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8695558019d6c7bf4e3c3d1f4119c9b49b3e6b9.png)

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [November 22, 2023, 3:01am UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/6 "2023-11-22T03:01:46Z")

</div>

I am trying to digest, the above replies but couldn't exactly grasp how to implement.

Are you guys saying, when clicked, I can set to reduce/extend the container, and let the extension overflow?

Edit:  
I saw under style, there is a "position" style. But I have no idea what this CSS Property does.

---

<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:** [November 22, 2023, 7:44am UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/7 "2023-11-22T07:44:27Z")

</div>

Don't worry about it.  
Make the view as high as the base text field and button, something like 32px I guess.  
On the root container, add a `overflow: visible` style.  
Then make the options panel where ever you want, outside of the view's boundaries.

When you place your dropdown in a view, check the `useDefaultViewHeight` property, make sure the embedded view is the right height (32px), and add the `overflow: visible` property here as well.  
Make sure it's on top of other components by clicking ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8695558019d6c7bf4e3c3d1f4119c9b49b3e6b9.png) or setting a `z-index` style.

That's it.  
I'm trying to figure out if there's a way to make things simpler, maybe through css, but it's already quite simple.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 22, 2023, 7:57am UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/8 "2023-11-22T07:57:18Z")

</div>

The only way i see this working is with js, but its not that simple as just to ask the position. You'll also have to make sure the popup actually fits on the screen (if your button is on the bottom of the page ,you'll want the popup to open above...)  
Its all really just to much work imho, when there already is a multislect dropdown

---

<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:** [November 22, 2023, 8:00am UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/9 "2023-11-22T08:00:11Z")

</div>

Seems much simpler to get rid of the popup entirely and just use an overflowing container

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 22, 2023, 8:26am UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/10 "2023-11-22T08:26:05Z")

</div>

Anyways if he really wants to fiddle aronud with it, here is some js demo to location/size of the component and screen  
[bound.zip](https://forum.inductiveautomation.com/uploads/short-url/7dpQ5BmHFkUcKutSBVzMPvuJCTJ.zip) (12.9 KB)

Add a class to your component you want to measure, and link it with the markdowns binding.  
The js will write to the view.custom[propName]

```auto
	propName="bounds"
	code = """<img style='display:none' src='/favicon.ico' onload=\"
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; 
		function getBounds(ev) {			
			var w = window.innerWidth;
			var h = window.innerHeight;
			const b = ev.target.getBoundingClientRect();
			const retProps = {windowHeight:h,windowWidth:h, elementBounds:{bottom:b.bottom,top:b.top,right:b.right,left:b.left}}			
			view.custom.write('"""+propName+"""',retProps);
		};			
		const elements = document.querySelectorAll('"""+value.class+"""').forEach(e => {					
									e.onclick = getBounds;																										
								});	
	\"></img>""".replace("\n", "").replace("\t", "")
	return code

```

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [January 14, 2024, 5:36am UTC](https://forum.inductiveautomation.com/t/dropdown-popup-over-flex-container/82212/11 "2024-01-14T05:36:44Z")

</div>

Thanks. It worked. So far.  
I played with position=absolute and overflow=visible

I have a small view (flex column with two section) - the top section when click will toggle the display of the bottom section.

In the root of small view, style, is set to position=absolute (together with width=something style)

This small view, I drag to large flex view. and set that flex section to overflow=visible.

Only bad is, I cannot justify. but is always on left edge.. Should be ok.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/b/ab82f10fff7cdf927814fbc4850c165ca62e0caa.png)

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

Could not gone this far, if not for your posts.

Thanks.

Edit: If only I could find an event where user click away from the dropdown box, I can make it collapse automatically.