Skip to main content

Hey,


Let’s say you have a dropdown button and when clicking on it you want the menu to appear upside instead of downside aka a dropup.


When prototyping this, do you have any idea if this is possible to do without making both the default state of the component and the active state the same height? Ideally the default state should be the height of the button and the active state the height of the button + the height of the menu.


If I don’t make them the same height since the anchor point of the component is on the top (I guess top left corner) the options menu pushes the button downwards.


Is this something to be considered in a following update i.e. set up which anchor points should always stay fixed (similar to how adobe after effects does it when you want a specific corner to stay fixed).


See the prototype below for more clarity:

Figma – 2 Mar 21

Note: making the menu appear as an overlay doesn’t really solve my issue.

Hi @Adrian_Harja !


I guess this is a bit late — but hope it still helps!


This is totally doable. You just need to use zero-height-frame trick.

And I added slot trick as well — so you can change the content depending on the location you use it.


There is also a hover option, as it might be tricky if you are seeing this mechanics for the first time.


Here is rough working example:

Figma – 4 Feb 22

The only missing part is to turn off hover events passing trough the open menu and triggering hover on elements behind it. But guess that can be solved too.


Let me know if this helps!

Hey @Marko_Kosovic - Thanks so much for your example. I’m wondering if you have an idea of how to combine a standard button with this pop-up option (so you could click or select a different option), kind of like google calendar’s new RSVP button

Reply


Terms & ConditionsCookie settings