Hello, newbie here
I am making a table with a dropdown option on one cell on each row but the other rows seem to overlap with the dropdown box, making the dropdown hidden behind the other rows. Please help! thank you!
Solved
How do I make the dropdown display over other components?
Best answer by Haroll
Hi @mungbean
I’m assuming that your are using an auto-layout frame to vertically space the row of your table. If you select this frame, on the right panel, auto-layout section you may click on the context menu, and then change the Canvas stacking for “First on top” (as shown below) so your dropdown will always be above the one below
If you are not using an auto-layout frame, well I suggest you do, then just change the order of your element on the left panel, so the line at the top of the table, is placed at the top of the layer panel
I have the same exact issue and can’t seem to find a solution. As a customer, I’m extremely disappointed with this.
Hi @mungbean
I’m assuming that your are using an auto-layout frame to vertically space the row of your table. If you select this frame, on the right panel, auto-layout section you may click on the context menu, and then change the Canvas stacking for “First on top” (as shown below) so your dropdown will always be above the one below
If you are not using an auto-layout frame, well I suggest you do, then just change the order of your element on the left panel, so the line at the top of the table, is placed at the top of the layer panel
The menu dropdown always displays behind the other items in the frame. Canvas stacking and moving the layers does not change this behavior. Basically there is no way to get this menu to open in front of other objects on the page. You can see in the screen shot that the dropdown under “SKU” (which contains “Phoenix Baker”) shows up behind the other elements on this frame. Let me know what you think @Haroll, this has been keeping me up for days lol
1 person likes this
Ok, from my understanding of your design : it looks like you’ve got an horizontal auto layout with all your selects inside :
There is a frame containing on the left : a title and a description, and on the right the auto-layout aforementioned.
And this particular element can be found 3 other time (Concession Setter, Description and Concessions). I’d say these elements are inside a vertical auto layout and it’s this one which need to be set to First on top as shown below, I named this auto layout “top container” and I change its canvas stacking, so you can see the outcome before (on left) and after change (on right)
Thank you So much. It’s working perfectly.
Im struggling with part of this. I have the list set as On Top in both the component and the instance, but I can still see through it. The pic below shows just the drop down Sec List component where you can see through to 2 different types of objects, one frame and one text. The list component has a 100% FFFFFF white background, and is set to On Top (just to be sure).
The prototype example is also below, showing the same result
A strange thing is when I setup the drop down it initially was not transparent, but somehow it is changing.
Thanks
1 person likes this
I am having the same issue. I see the solution works for a horizontal approach but for anything vertical, I can’t seem to find a solution. Just as Tony28 stated above. If you have a table design with each cell as a component that displays a hover state as in this screenshot, the top most layer works just fine (top field cell as first) but anything below it, displays the hover with the first layer floating above it. Both need to show the hover for my design.
Any help would be greatly appreciated!
Top most layer hover card:
Second hover card where the top most layer appears up front.
Thanks!
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.