Can not set % of screen height of top of scroll flow component


#1

I agree that “bottom of of scroll flow component” can not be set with % height, but top alignment of the component can. I need to design some UI screen with long content, so I have to put all component to “Scroll Flow” with “Contributes to flow” feature.

UI look good on phone, but with tablet with higher screen size, it look really bad.
I only want to push the first component of flow down depend on screen size (set top alignment of first component in flow with %), but it can not set.

thank you!


#2

Can you add screen shots of what it looks like on phone and on tablet?


#3

but on iPad

I want to push down “First component” down base on % screen size


#4

Unfortunately % would probably not work because it is calculated from the element on top of the element; not screen size. I’m guessing you should simply create a top alignment override for larger screen sizes (just select larger screen preview and click override from alignment).


#5

I don’t know why components laying on Foreground and Background can set “Top alignment” with “% of screen size”,

but components of “Scroll Flow” layer can not ? because of flexible length of “scroll size” ?


#6

Were you able to fix the problem?


#7

I think “top alignment override for larger screen sizes” as suggest of Antti_Neonto do not cover practical situations, for display on iPhone SE vs iPhone 11, it look not really friendly for screen size of over 6 inch screen size phone.


#8

Hi,

Could you post screenshots of your projects with marking what elements do you think are misaligned. To my eye I don’t see why the content cannot start just below the navbar or top of the screen. Is it some sort of “card” element that you’re trying to mimic? I mean sort of element which appears from bottom of the screen.


#9

Ngoc, Have you tried using the “responsive swapper”? You could add space to the top of the component and only use that version on the ipad. Let me know if this might work.


#10

I have a screen with flexible item (it may be added in the future), so I have to put it to Scroll Flow.

It look good on small screen size device

But on longer screen size (like iPhone XS max), it have big blank space at the bottom

If I rearrange for long screen size

When browse on smaller screen size (like iPhone SE) It push most of items out of screen view

So the best way is set top aligement of top item by % of screen size, it scale better for all screen size.


#11

I thought the “responsive swapper” would help, but it is limited to four device sizes: Narrow phone, wide phone, narrow tablet, and wide tablet. The link is an example of a swapper with a white rectangle at 0% opacity, making it invisible. The rectangle is 200 pixels for narrow devices in portrait mode; 50 pixels in landscape.
If you look at this on desktop you’ll have to make browser window narrow to see change.
https://neonto.cloud/preview/plzx7yaz


#12

I have checked your link but it not really satisfy “friendly” UI requirement.

thank u


#13

I agree, but thought I’d offer it anyway. Good luck!