Create Dynamic and Flexible Height Vertical Gallery

Introduction

Scrolling through controls is frequently not necessary or should be avoided. We can make the controls height adjustable or overflowing in such a situation. We shall examine how to exceed gallery height in the article below. Without a scroll bar, gallery height also rises as the item count does.

Scenario

We'll look at how to dynamically adjust the gallery height in the post below to get rid of the scrollbar.

Objective

To show the need for the overflowing height of the gallery. We shall see to create a screen where the gallery could included. In the below article I am showing through the scrollable screen, we can also use this logic for a simple blank screen. After designing a scrollable screen at the end dynamic gallery is built.

Step 1. Create a new Scrollable screen.

Step 2. How Scrollable screen work?

The scrollable screen can be scrolled throughout. When a scrollable screen is created, a canvas and a data card are added by default.

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

From the highlighted border we can pull the border and bring it to the yellow border. It is just to show the flexibility of the screen.

Step 4. How to ensure that the Add section 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 to 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.

This popup allows you to enter 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 dynamic/flexible/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 showed how to make the gallery's height adjustable in the post above. In a similar vein, we can likewise adjust the height of other controls. If the control height is adjustable, the control's scroll bar will disappear, and the height will rise in proportion to the number of items.