# Get component position during runtime for popup **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 15, 2025, 11:51pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400 "2025-02-15T23:51:06Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 15, 2025, 11:51pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/1 "2025-02-15T23:51:06Z")
I was looking to do something like make my own Dropdown component in a sense. Mainly to try making a multi-select feature that stays open to select multiple at once and then be able to call it as an embedded view throughout the project, regardless of what type of container it is in. I could see something similar being useful to popup a small table or something to give more context to a dropdown selection, although I've gotten around something like this by generating the label for the options with delimiters for different information. With the built in dropdown component, it seems it is able to take a click anywhere on the component, but then orient the dropdown "popup" according to the actual component's position to line it up. I tried playing with the onClick event for on a Button in both a Flex Container and Coordinate Container. Both have the onClick Mouse Event which gives a couple ways to get x and y coordinates of the event, but without knowing x/y coordinates of the actual button, I can't think of a way to make a popup line up with the button no matter where a user clicks. I also tried to get around it by making the "Dropdown Button" in a coordinate container to try to do something with the x/y position there, but that's just a relative x and y position to the container, so I don't think there's a way to get that in relation to where the container is on the screen or not. Is there a way to achieve something like this? I thought there would be something since a native component could, but maybe that's just an advantage of it being a native component. ---
**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:** [February 16, 2025, 10:42am UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/2 "2025-02-16T10:42:08Z")
I think a couple of screenshots would help. ---
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 16, 2025, 4:36pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/3 "2025-02-16T16:36:07Z")
Something like this, but I'm looking to make it be aligned with a component like how a native Dropdown component does it: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/ce491ff227a0112318efdb7715109340661c5f8f.png) Or even like how the vision dropdown can show a table instead. Really just looking for a way to open a popup aligned with a component that calls it, like a button using the onActionPerformed script: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/f/0f1e8869511914ce9610886d8260f4d780b583bd.png) ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 16, 2025, 4:53pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/4 "2025-02-16T16:53:29Z")
Try this, > **[Ignition Exchange](https://inductiveautomation.com/exchange/2698/overview)** > > Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community. ---
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 16, 2025, 4:56pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/5 "2025-02-16T16:56:28Z")
Had an idea that almost worked after remembering about the overflow property. In one view, I'll refer to as ListDropdown, I put a Button and a Flex Container with some checkbox components. onAction script of Button hides and shows the Flex Container. The root of ListDropdown has props.overflow set to True. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/10d07eae023cbf6c79e2c553520c8894fa9d9a97.png) In another view, I'll refer to as Main with root.props.direction set to column, I put an Embedded View component in a Flex Container, labeled HeaderCtn, with the ListDropdown as it's path. I set the props.overflow of HeaderCtn to visible. And this works! The issue that it runs into is that I put another Flex Container, I'll refer to as ComponentCtn, under HeaderCtn with components in it, the ListDropdown that becomes visible on button click is behind the components in ComponentCtn. Button Unpushed: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c195c2435d191bba44e70d265173918ff50c0f5f.png) Button Pushed: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/afcfbd50e0ef9aae56855834ebd5d088087ad708.png) Can I do something to change the Z-Ordering? ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 16, 2025, 5:02pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/6 "2025-02-16T17:02:16Z")
In case you missed my post, try the exchange resource, at least for inspiration. ---
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 16, 2025, 5:07pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/7 "2025-02-16T17:07:39Z")
I gotta remember to check exchange first. So this is basically what I was saying for functionality purposes, thanks! But it looks like it has the issue that I made this post for. It doesn't make it line up nicely with the component that is opening the popup. It just opens the popup centered on the click, which doesn't look nice like how the native dropdown does. Functionality that I'm looking for though, it's great! ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 16, 2025, 5:20pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/8 "2025-02-16T17:20:48Z")
Adjust to suit your needs. ---
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 17, 2025, 7:48pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/9 "2025-02-17T19:48:17Z")
> [@thomasj](#): > > With the built in dropdown component, it seems it is able to take a click anywhere on the component, but then orient the dropdown "popup" according to the actual component's position to line it up. This is the part I'm asking about. I appreciate the part that matched what I said I wanted to do, but my main issue is I don't know how to align the popup with the calling component, or if I can. ---
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 17, 2025, 10:13pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/10 "2025-02-17T22:13:37Z")
> [@Creating Custom Dropdown](https://forum.inductiveautomation.com/t/creating-custom-dropdown/51940): > > Hi, I’m trying to create a custom dropdown using overflow:visible. The dropdown is placed on my “top” docked window. In the designer everything is working as designed, but when I try it in the runtime session, the dropdown list is displayed behind my “main window”… any way to manipulate the z-order here? slight_smile Designer: runtime session: This got me closer. It displays over the buttons now, but not the Table for some reason I have further down in the page... ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/20fb90c9fc3752b7f24b64ca9e22c7a0d2ecea40.png) ---
**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:** [February 18, 2025, 7:59am UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/11 "2025-02-18T07:59:03Z")
It's not as neat, but I'd just open a modal and be done with it. Sometimes the time you have to invest into making something only marginally prettier is just not worth it. ---
**Author:** ![Todd\_Frahm](https://avatars.discourse-cdn.com/v4/letter/t/f4b2a3/32.png) [@Todd\_Frahm](https://forum.inductiveautomation.com/u/Todd_Frahm)\ **Post date:** [February 27, 2025, 5:26pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/12 "2025-02-27T17:26:33Z")
I'm a stickler for standards. In my mind CUI (common user interface) conventions should be followed as often as possible. the intent of a combobox is to offer a list from which a value is selected, and displayed, in a textbox looking control. How would one display multiple selections in the textbox of a combobox? I may look at other controls which inherently support multiple selects (listboxes, tables, others?) then allow it to expand to show the non-selected items as well. More of a collapsable listbox of some sort with two or three rows high as smallest size and when it's clicked on, expands to show more choices to include or exclude. Upon losing focus it collapses to a list with 3 rows and a scrollbar if there are more than 3 options selected. Just a thought outside the box. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [February 27, 2025, 6:44pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/13 "2025-02-27T18:44:41Z")
> [@Todd\_Frahm](#): > > How would one display multiple selections in the textbox of a combobox? FWIW the Perspective dropdown does have a `multiSelect` option. ---
**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\ **Post date:** [February 28, 2025, 3:01pm UTC](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/14 "2025-02-28T15:01:33Z")
Is there a way to expand and collapse a component from within a container that doesn't need to stretch the whole container when expanding but ensuring it also displays over components underneath it? If I'm reading what you wrote correctly, that's essentially what I tried to do with this comment but ran into issues with the table component always trumping in z-order. [Get component position during runtime for popup - #10 by thomasj](https://forum.inductiveautomation.com/t/get-component-position-during-runtime-for-popup/102400/10) My thought from here, assuming the z-order issue could be figured out, would be to have the button change to "Filters Applied" if there are selections. You'd have to expand the list to see which are selected or I could see possibly going the route of showing them in another component or something if needing to see them otherwise. I could see something like the chips that get made when a dropdown has multiselect enabled. When clicking the button it would expand the list and have some logic to move the selected options to the top for easy viewing, while all available other selectables would be displayed below the selected ones. Also, for clarification of the post's intent, this was just something I was playing around with to see what could be done. It's not critical, and I don't need something that just works. Was just curious what other people could think of and if there were ways around the roadblocks I ran into. Which through this post the first roadblock was not being able to line up a popup with the component that was clicked. If this were possible, then using a popup to do all this would've been easy as the popup opens in front of everything (as far as I'm aware). That led me to trying to use the overflow property to keep components in the same container, which guarantees alignment, but that hit the wall of the table component trumping any z-ordering I tried playing with. I do appreciate all the replies!