iOS: How to make a screen/page higher than the device screen?

FTP shared this question 9 months ago
Answered

Hi,


I need to make a screen/page higher than the iPhone screen, the default 375x667 of an iPhone 6/7/8.


I've searched but so far not found the solution.

It seems others also had the issue...

https://www.justinmind.com/community/topic/screen-size-longer-than-device

...but the solution is not given.


I want to make something like the iOS "Settings" page.


The page is very long, a lot of fields on it, we can scroll up and down, but the Status & Header bars always stay visible, fix, and the rest of the page goes under with the classic 5% transparency.


Thanks for your help!

Best Answer
photo

Think of a dynamic panel as a window and its dimensions as the amount of its contents that are visible at any one time. It is not a limitation on the number or size of elements it can contain. So, whether your content is 375px x 667px or 375px x 2000px or 600px x 2000px, that content can be contained inside of a 375px x 667px dynamic panel, it's just that only 375px x 667px will be visible at any one time, but that's why it has the ability to be scrolled.

Therefore, you should set the size of a dynamic panel not based upon how many elements it will hold or the amount of space all of its elements utilize, but rather upon how much of the content you want visible at any one time. Since we're talking about the iPhone template here, that means the maximum size your dynamic panel should be is 375px x 667px. Any larger and you have a dynamic panel that continues off of the screen and which is revealing content that is not visible to the user/viewer due to the limitations of the device's screen dimensions. While you could make a dynamic panel smaller than this maximum, in your example, 375px x 667px is the size it should actually be since you want it to fill the entire screen and the scrolled content to be faintly visible as it passes under the "Settings" header and phone status at the top.

You should be able to use the dynamic panel in the supplied prototype as is, replacing the included image with your content. The only issue you will encounter with dynamic panels in JIM is that sometimes it becomes a little tricky to position dynamic panel content elements that initially exist outside of the visible area of the dynamic panel (e.g. contained element top = 700px). While you can see such an element in the outline, you don't see it in the JIM UI unless you click on it in the outline. One solution for this is to initially, for content positioning purposes, make the size of the dynamic panel larger than its final desired size, big enough to show all of the elements it will contain so that all of that content is visible in the JIM UI while you are positioning everything. Then, once the elements are all positioned, changing the dynamic panel size back to its desired final size, which in your case would be 375px x 667px.

I hope this makes sense and helps. Cheers!

Comments (6)

photo
2

Hi,

If I understand your question correctly, I've created a prototype which I believe accomplishes what you are desiring to do. It is attached to this response. Simply download the file and change the file extension from ".rar" to ".vp" and you will be able to open it in JIM. It is not a compressed file, so you do not need to unarchive it like you normally would with ".rar" files. I have also included a couple screenshots below. Let me know if this helps or if there is more to what you are trying to prototype.

Cheers!!

7e5538fe88acda66a3e7d1d8cd9feb9b

40cac5e1caa021a0681108bd9ba6cd16

photo
1

Hi,


Thanks for your answer!


I had a look at your prototype. The simulation shows exactly the behaviour I need.

BUT... your prototype is based on 1 giant image. Not JID objects that allows interactions.

So I tried to deduct a way to do this properly, but so far it's not working.


I can add a dynamic panel, set it to a longer height than 667, when simulating the screen will scroll up and down, but Status & Header bars will also scroll, even with Always on top and fix/locked position set.


So I'm still stuck :-/

Any other idea on how to do?

photo
1

Ok, I found one solution (not sure it's the best one):

- Add a "Dynamic Panel" right below the "Header Bar" and size it to cover all the rest of the screen

- Set the "Dynamic Panel" property "Vertical Overflow" to "Scroll Auto"

- Add JIM objects in the "Panel 1"

- Move any object that should go below the end of the screen via its "Position" > "Top" setting. This will move the object down, display a vertical scroll bar to allow scrolling up and down all the panel, but will not change the size of the "Dynamic Panel".


In fact, I was expecting to find a setting to set the height of the panel prior to start drag & dropping objects on it. But so far I only found the option to move objects down to extend the panel size (without extending the "Dynamic Panel" object size).


I hope it's the right way to do proceed.

photo
2

Think of a dynamic panel as a window and its dimensions as the amount of its contents that are visible at any one time. It is not a limitation on the number or size of elements it can contain. So, whether your content is 375px x 667px or 375px x 2000px or 600px x 2000px, that content can be contained inside of a 375px x 667px dynamic panel, it's just that only 375px x 667px will be visible at any one time, but that's why it has the ability to be scrolled.

Therefore, you should set the size of a dynamic panel not based upon how many elements it will hold or the amount of space all of its elements utilize, but rather upon how much of the content you want visible at any one time. Since we're talking about the iPhone template here, that means the maximum size your dynamic panel should be is 375px x 667px. Any larger and you have a dynamic panel that continues off of the screen and which is revealing content that is not visible to the user/viewer due to the limitations of the device's screen dimensions. While you could make a dynamic panel smaller than this maximum, in your example, 375px x 667px is the size it should actually be since you want it to fill the entire screen and the scrolled content to be faintly visible as it passes under the "Settings" header and phone status at the top.

You should be able to use the dynamic panel in the supplied prototype as is, replacing the included image with your content. The only issue you will encounter with dynamic panels in JIM is that sometimes it becomes a little tricky to position dynamic panel content elements that initially exist outside of the visible area of the dynamic panel (e.g. contained element top = 700px). While you can see such an element in the outline, you don't see it in the JIM UI unless you click on it in the outline. One solution for this is to initially, for content positioning purposes, make the size of the dynamic panel larger than its final desired size, big enough to show all of the elements it will contain so that all of that content is visible in the JIM UI while you are positioning everything. Then, once the elements are all positioned, changing the dynamic panel size back to its desired final size, which in your case would be 375px x 667px.

I hope this makes sense and helps. Cheers!

photo
1

Hi,


Thanks for the answer.

Make sense and helps, yes!


Here are my comments...


- I fully understand the concept of "window".

As you can see in my latest post, I already used the Dynamic panel this way.

But I was looking for/expecting a setting not for the size of the Dynamic panel object itself (the size of the window), but for the space inside (that could have been the size of a panel).

So far I only found the way to keep on moving objects down and further down to extend this space. Which was not very convenient. So I'll use your method to initially make the panel bigger and size it down when the content is finalized.


But still, is we want to do simulations, we will have to size up, size down, it's still not very convenient.

And if I want a margin at the end of the content, the padding setting is not available so we have to add another invisible object just to create some space below the last object :-/


It looks like there's room for improvement around those Dynamic panels.

photo
1

I would agree that dynamic panels are at times awkward to work with.

Two things, though, to address comments in your reply. There are indeed no size settings for inside of the dynamic panel. It is simply the full width and depth of the content you place within it.

And regarding margins, I almost always include a rectangle within the content of my dynamic panels, placed behind all of the other content in the panel, and set the dimensions of the rectangle to a height and width that is the full area that I want to be scrollable. So, for example, if I have 375px x 667px dynamic panel with content that is, collectively, 375px wide and 1000px deep and I want 20px of padding on the bottom for when I have fully scrolled to the bottom of the content, I will add a rectangle to the panel content that is 375px x 1020px. Unless I want a particular background color throughout the panel, I will simply style the rectangle to have no color and no border. Doing this should create the margin you are looking for.

As before, I hope this helps. Cheers!

photo