Skip to main content

Hi,

 

I am struggling with the overlay feature, and the alternative option feels brutal. 

 

I simply want the drop down of an input row to produce a modal. Some issues I’m having include: (1) height dimensions and managing a scrollable overlay and (2) using smart animate such that the dropdown modal appears from the bottom of the input bar rather than the top of the screen. Is this not possible? The alternative would be to create a frame hide it and switch between A LOT of variants. Has someone figured out how to manage overlays in a reasonable and dynamic manner? I’m not having much luck.

I hope I got this right. A dropdown modal that drops down from the button’s position, with its content scrollable.

See the result here

The steps to make this happen:

  • A dropdown component that has a closed and an open state. Add a 1ms after delay interaction between them to make it drop down immediately.
  • The dropdown needs vertical overflow.
  • Add an overlay interaction from your button to an instance of the dropdown (you can’t use the component itself). Set it to manual and position it where you want it. Open up the state options and select reset component state (otherwise the animation only works once).

You should be able to copy my design over to your drafts and inspect how it’s set up.

Thanks this makes sense. I will try it out. Very much appreciated!

Terms & ConditionsCookie settings