How to Create Scrollable Screen?

Introduction

One of the most profitable features that may be included in a project is a scrollable screen. It aids in avoiding full-screen scrolling.

Scenario

We will review the request's details in this and then give individuals the opportunity to respond. This results in a big screen that needs to be scrolled through. In case distinct portions or controls require separate scrolling. This solution will be helpful because having multiple screens when not in use can get annoying. One scroll will appear on each screen.

Objective

For a variety of uses, scrollable screens will be created. One scroll bar, as opposed to several, might be seen on a huge screen.

Step 1. Add a new Scrollable screen.

Step 2. How Scrollable screen work?

A scrollable screen allows for full-screen scrolling. By default, a canvas and a data card are added when a scrollable screen is generated.

Step 3. How to set the height width of the pane?

We can drag the border from the highlighted area and bring it up to the yellow border. It's merely intended to demonstrate the screen's versatility.

Step 4. How do we ensure that the Add section is aligned after entering controls?

The add section isn't always clickable. This unclickable issue arises when the Add section covers datacard1, the control added to datacard1, or other controls. In my instance, Form1 is connected to Datacard1 in the form even though it is not inside Datacard1 in the treeview (navigation).

Step 5. How to add controls in a scrollable screen?

With the exception of one control that is inserted through a pane (as the text above indicates, "Add an item from the insert pane") and within the same canvas, all controls on a scrollable screen will always be added within data cards. When a screen is scrollable, it always scrolls a single canvas, making the entire screen scrollable. Using the pane or Add section, all of the controls will be added to the same canvas.

Using this window, you can leave comments.

Add first control

Add the rest of the controls

Step 6. Add the second or next control on the scrollable screen.

In the below screen, we can not see Gallery 2 because it was cut.

After pasting we can see Gallery 2 in DataCard2. The screen will grow as Gallery2 grows and the entire screen will be scrollable.

Step 7. Make Gallery height overflow.

If the gallery height is not dynamic, a scroll bar will show up on screen two. One scroll bar needs to be buried or made flexible in order to prevent this. Therefore, it would be excellent to remove the gallery scroll bar. In order to create a dynamic gallery scroll bar, we must construct a height formula.

Conclusion

We learned how to create a scrollable screen in the post above. How to give the scrollable screen controls.

This functionality is really helpful when using the app on a phone. It was possible to scroll the entire screen, exactly like any other program.