Copy link to clipboard
Copied
Hey there,
I'm trying to mock-up a fairly simple cookie banner, using the overlay feature in prototyping mode.
The banner is built as a component with different states
But and the states differ in height because for the second and 3rd state there is more information to show.
But now using overlay to slide up this banner from the bottom of an artboard, I can't figure out how to keep it sticking to the bottom without having the content offscreen when the state change.
See this example:
As you can see expands down pusing content off the viewport.
Is ther somehow a option have the overlay move up when the state changes of the component when clicking that link?
<Title was renamed by moderator>
Hi there.
Make sure the boxes in your two states are bottom aligned to each other. Also, the component should be bottom-aligned to the overlay artboard.
Here's an example:
Copy link to clipboard
Copied
Hi there,
Thank you for reaching out. I have tried to search for something which might help you. Please check out this video: https://www.youtube.com/watch?v=eaDtD3Uwo4Y and see if you can achieve your workflow.
I am also keeping the discussion open for our experts if they have more tips and tricks for your workflow.
Thanks,
Harshika
Copy link to clipboard
Copied
Hi there.
Make sure the boxes in your two states are bottom aligned to each other. Also, the component should be bottom-aligned to the overlay artboard.
Here's an example:
Copy link to clipboard
Copied
I'm not sure how to do that, because if I change the y position of 1 state it carries over to the others. How should I change the position of different states independently?
Copy link to clipboard
Copied
Oh nevermind, found it 😄
Copy link to clipboard
Copied
Key is that you select your layers in each component state and move those, not the component itself.