Upvote 1

Now that JIM has adaptive sizing, how do I keep a button below a paragraph widget on screen r

Answered Steven Glickman ● ago

I have a paragraph widget with descriptive text. It's set to autofit text, and at 100% screen width. When the screen resizes smaller the paragraph height increases (more lines) but the button doesn't move down. How do I get the button to move down automatically?
Also, why can't I attach a .vp file to the question so I can show exactly what I'm trying to do?

Replies (1)

Danielle Schneider ●

Hi Steven,

You can group those elements in a dynamic panel and change the layout to vertical, so the button will scale down according to the resizing you apply to the dynamic panel and the button itself.

Unfortunately not being able to attach .vp files is a limit of this platform, but if you change the extension of the .vp file to .rar or .zip, it will be able to be attached, and then we can download it by just changing the extension back to .vp.

Best,

Danielle

Steven Glickman ●

I don't need the button to scale down, I need it to move down. I made it work with a resize window event, but that seems like it should be handled automatically since JustInMind now handles adaptive designs. Everyone going to run into situations where a widgets need to remain x pixels below some other widget as everything resizes.

My solution

On window resize move the button's y position (calculated) to constant A (where a equals the button's original y position - the paragraph's original height) + the height of the paragraph widget.

It's not too painful because I have one resizable paragraph widget and one thing that needs to move as it resizes, but this would be a nightmare if I was building a survey page with multiple paragraph widgets (one for each question) that all resized and had to push everything below them down as the window got narrower.

Steven Glickman ●

Nevermind. I think that I figured out what you meant. If I put everything into a single dynamic panel and set the layout to vertical I can make it put padding between each element. Is there a way to make the padding between elements different? In other words, could I have a question, a text box 12 pixels below it, then the next question 30 pixels below that?

Danielle Schneider ●

In that case, you should have the dynamic panel be a free layout. Then have the elements be pinned to the top of the panel, and then adjust the margins individually. See linked prototype as an example: https://www.dropbox.com/s/kbqeuxo2fa5cbl2/Fixedpixels.vp?dl=0