Our Application has a long content in one screen and When we scroll to see the lower content, All of the Div is going up together.


So, This makes us can't see the lower content.

 



All of this layout use from Outsystems Layout. They are same with this example.


Could you please advise me any solution to solve this problem?
Thank you.

Hi Chunyanuch Kimpiam,

     I can't get your point. can you tell more detail about your issue and also please share the published preview link.

Sorry to keep you waiting. Actually, it is a customer project so we can't share it. 

But more issue is 'the pull refresh' make all the page can swipe up or swipe down out of range. That's a cause of empty space above.

Main cause issue from 'the pull refresh' is a confused swipe. When users want to swipe up a text in the content layout, The text in content, doesn't go up but all of content layout goes instead text.

I think if I can close or delete 'the pull refresh' function maybe it can solve this confused swipe issue.

Hi,


Are you sure you are using Private/PullToRefresh and put it in the web block if any.

Please share more details which one is blocking the other one.


Thanks

I have tried to create a sample app for testing.
After adding a new universal application, It has a basic layout look like this picture

About PullToRefresh I don't assign anything for it.
When I tested an application by swipe up and swipe down the page.It goes far and far.

From this sample Can I fixed content not to move up and down like in this video? Swipe up and down test



Sorry, I forgot to use the reply. If there is a solution please reply again. Thank you.

Gee Kay 
Siddhant Chauhan


I have tried to create a sample app for testing.
After adding a new universal application, It has a basic layout look like this picture

About PullToRefresh I don't assign anything for it.
When I tested an application by swipe up and swipe down the page.It goes far and far.

From this sample Can I fixed content not to move up and down like in this video? Swipe up and down test





Finally, found a solution for fixed content layout not to move up or down (Floating content).

If you don't want to use pull to refresh, you can apply this CSS code in your main style sheet.

.ios .main-content {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    /*margin-top: 10%;*/

}

The base CSS has an absolute position so place fixed instead of it.
In addition, you can insert the margin-top as you want.

Thank you.


Solution

Hi,


Private/PullToRefresh would work easily if you could put your content in web block and use Private/PullToRefresh in web block it self and then use that web block in screen. It works in my POC. Check below screenshot and try it at your end.


Thanks

Solution

Siddhant Chauhan 
This layout looks good and I will try it. Thank you very much!

Hi,


Private/PullToRefresh would work easily if you could put your content in web block and use Private/PullToRefresh in web block it self and then use that web block in screen. It works in my POC. Check below screenshot and try it at your end.


Thanks