Upvote 4

Responsive positioning?

Answered Victor Conesa ● ago

I have two data grids one below another. The first is 3 rows in length so I can place the second one directly below it. But users will be able to add more items to the first data grid. Is there a way to make it responsive so if the first data grid becomes 4-5 rows the second one stays directly under it?

Replies (1)

geteasyidea ●

I couldn't find the answer.

Danielle Schneider ●

Hi there,

We're working on creating a tutorial for this right now. It should be up soon. In the mean time, here's an explanation of how to create a responsive prototype:

The two properties you need to use to make responsive prototypes are pin positions, and % widths/heights.

Pin Position - find in the Properties palette, under the section Position. Pin positions will pin an element to a certain part of the screen. If you want to make a 'sticky' header, use pin position, and change the 'y' parameter to 'pin to top'.

% width/height - find in the Properties palette, under the section Size. % size will change the size of an element to be responsive to the size of the screen.

Check out the attached prototype as an example. Let me know if you have any questions.

Best,

Danielle

Files:

Hluchnikr ●

Dear Marielena,

did you find a solution? I do not think the provided prototype solves the issue...

The general question is how to position an object based on a position/size of another one.

The issue arrises not only when a user can change a size of an object (adding row), but also for example when you switch mobile to horizontal - texts have less rows and the space below them is much bigger compared to standard vertical screen.

Best, Robert

Danielle Schneider ●

Using a dynamic panel with a vertical or horizontal layout will allow you to position elements right next to each other, and they will stay in that position when the screen orientation changes.

geteasyidea ●

see this video from just in mind for responsive, it helps

https://www.youtube.com/watch?v=bdyDSOHe4ZY&ct=t%28EMAIL_CAMPAIGN_2018_01_11%29