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.
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:
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.
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:
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!
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.
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.
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.
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
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!
