Create Dynamic and Flexible Height Gallery

Introduction

We often come across where scrolling of controls is not needed or avoided. In such cases, we can make control height flexible or overflowing. In the below article, we will see how to overflow gallery height. When the item count increases gallery height also increases without having a scroll bar.

Scenario

In the below article, we will see how to make the height of the gallery dynamic to avoid a scrollbar.

Objective

To show the need for 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. The scrollable screen feature explained

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. Set the height width of the pane as per the need

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. Ensure to align the Add section after entering the controls

Sometimes Add section is not clickable. This unclickable problem happens if the Add section overlaps with other controls or datacard1 or the control added in datacard1. In my case, Form1 is not inside datacard1 in the treeview(navigation), but it is still associated with datacard1 in the form.

Step 5. How to add controls to the scrollable screen

All the controls in the scrollable screen will be added within the data card always except the one control that is added through the pane (we can see from the above screen text is Add an item from the insert pane) And within the same canvas. The scrollable screen always scrolls one canvas so the entire screen becomes scrollable. All the controls will be added in the same canvas by using a pane or Add section.

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 gallery height is not dynamic then on screen two scroll bars appear. To avoid this one scroll bar has to be hidden or made flexible. So, the ideal scenario is to make the gallery scroll bar disappear. We need to write the height formula to make the gallery scroll bar dynamic.

Conclusion

In the above article, we saw how to make the height of the gallery flexible. Similarly, we can make other control's height also flexible. If the control height is made flexible scroll bar of the control gets hidden and the control height gets increased according to the item counts.