justinmind-logo
 
Upvote 2

Scroll in a Screen

Solved Alex RV 6 years ago

Hi,


I am a little bit confuse about how to add many elements in a Screen.

I want to make a form or something similar, but I can put all the fields in one simple screen, I want to scroll it down and to continue adding fields or widgets. How can I do that?


Thanks in advantage!

Best Answer
photo

To scroll in a screen, select an element on the Canvas and drag it down the screen until it's past the bottom of the Canvas. It will turn blue, and the screen will start to scroll.

8b86216d0bbc0d7360d8ab67ee520bb1


Then, release the element, and the Canvas will extend down to contain the element you dragged.

7d9be8dd699642259eca8c8c2f7b40ac


When you click "Simulate", you will be able to scroll down the screen.

Replies (6)
photo
2

I can suggest two approaches. With the first approach, you scroll the entire screen. With the second approach, you utilize a dynamic panel to scroll only a portion of the screen. I have attached a prototype that demonstrates both approaches, using a form with fields, as you suggest. When you download the prototype file, simply change the filename extension from .rar to .vp. It is not compressed.

The primary consideration when choosing between these two approaches is how much of the screen you want to scroll. If you want the entire contents of the screen to scroll, then use the first approach. If you only want a specific window/area of content to scroll (e.g. only the form fields), use the second approach with the dynamic panel. The second approach might be preferable if you have a header/label above your form or a submit button below your form that you want to remain visible at all times.

To implement the first approach where the entire screen scrolls, position all of your fields on your screen in the order and spacing you desire. Since you have enough fields to require scrolling, some of them will be positioned below the bottom boundary of the screen template (e.g. below 667px of an iPhone screen template). The fields you position below the bottom of the screen boundary will be the ones that will initially be out of view when you simulate your prototype. You will scroll to bring them into view. After positioning your fields, ensure that the "Lock screen scroll" property checkbox for the screen itself (the very first item in your "Outline" panel) is unchecked.

To implement the second approach, drag a dynamic panel onto your screen and set its dimensions according to the size of the scrollable area you desire. The boundaries of the dynamic panel should not exceed the boundaries of the screen template, and the height dimension of the panel should not be set to accommodate all of your form fields. The size of the dynamic panel is only to determine the viewable area, not the size of all of the content it contains. Once you've sized and positioned your dynamic panel, place any content that you want to scroll (in this example, your form fields) inside of the panel that has been created automatically inside the dynamic panel when you dragged the dynamic panel onto the screen. Similarly to the first approach, some of your fields will be positioned below the bottom boundary of your dynamic panel. Once again, these are the fields which will initially be out of view, but will be scrollable into view. In this approach, ensure that the "Lock screen scroll" property checkbox for the screen itself (the very first item in your "Outline" panel) is checked. You don't want the entire screen to scroll, only the contents of the dynamic panel. To that end, set the "Vertical overflow" property of the dynamic panel to "Scroll auto". (Note: I have yet to determine the difference between "Scroll auto" and "Scroll always". I have used both and they seem to function identically. So, I cannot recommend one over the other, but start with "Scroll auto" and see if it functions as needed.)

Let me know if you have any questions.

Cheers!

97c00e4c0ff99e5c45aa33e757d4fdf8 551327fdcf248f53b6727dea6f3d1051

1. Entire screen scrolls - initial ---- 2. Entire screen scrolls - scrolled

-------------------------------------------------------------------------------

efe29d5e95de436a0d583b3c530144aa a03122a8a19a5ed5cfc7eb4497beb895

1. Dynamic panel scrolls - initial -- 2. Dynamic panel scrolls - scrolled

photo
3

In re-reading your question and looking at your attached screenshot, it is possible I might have misread your question.

In your screenshot, I see that you already have a dynamic panel that contains some elements. So, maybe you are simply asking how to add additional elements to your dynamic panel and have them visible in the Justinmind UI. The problem being: How do you accurately position elements within a dynamic panel that you want positioned below the bottom boundary of the panel if they disappear from view in the Justinmind UI as soon as you move them below the panel's bottom boundary?

I started to type out a long-winded solution involving positioning the additional elements mathematically (adding pixels), but stopped when I realized there is a much easier way. Just increase the height of your dynamic panel temporarily to be deep enough to include all of the fields you are going to add. That way, they will not disappear from view in the Justinmind UI when you are positioning them. Then, once everything is positioned properly, reset the height of the dynamic panel to the desired height.

If my first post doesn't address your question, hopefully this one does.

Cheers!

2416e52c761fde7ce966daecc7f5a60f

43a992d70e97ebf6f716aebab1ba4812

photo
2

Thank you so much, I understand it now with the second one!

photo
2

Glad it helped!

photo
1

Thank you for your contribution @eggroll :)


Best,


Sonia Durán

photo
1

To scroll in a screen, select an element on the Canvas and drag it down the screen until it's past the bottom of the Canvas. It will turn blue, and the screen will start to scroll.

8b86216d0bbc0d7360d8ab67ee520bb1


Then, release the element, and the Canvas will extend down to contain the element you dragged.

7d9be8dd699642259eca8c8c2f7b40ac


When you click "Simulate", you will be able to scroll down the screen.

Leave a Comment
 
Attach a file