Blog
Controls - How to set height of nested galleries dynmically
February 9. 2023
When working with sets of nested galleries, it may be necessary to specify a variable height for each instance of a child gallery in order to avoid empty white space or scrollbars. This post provides an example of how to carry out this task.
When working with related data, a common requirement is to display the child records that are associated with a parent record through a set of nested gallery controls.
By default, the height of every nested gallery will be equal. If a specific parent record contains greater or fewer records compared to the others, the nested gallery can contain empty space or scrollbars can appear.
This appearance doesn't look great, therefore, this post walks through how to set the height of nested galleries dynamically.
Demonstration of the problem - Setting up nested tables
Let's take the following two tables - a parent table that stores property types, and a table of properties. A 'PropertyTypeID' value links these two tables.
Demonstration of the problem - Setting up nested tables
Let's take the following two tables - a parent table that stores property types, and a table of properties. A 'PropertyTypeID' value links these two tables. Fig1 - PropertyType table
Fig2 - Property table
To display the data, we'll add a flexible height gallery to a screen (galParent) and set the Items property to the 'PropertyTypes' data source.
An important note is that for the technique in this post to work, the gallery that we insert must be a flexible height gallery.
To display the related child records, we can add a nested gallery (called galChild) and set the Items property to the following formula:
Filter(Property, ThisItem.PropertyType_ID=PropertyTypeID)This formula returns the child records from the Property table that match the PropertyTypeID value of the parent record.
When we run the app, the problem becomes apparent as shown in the screenshot beneath. Because the 'house' property type contains more records, a nested scrollbar appears in this specific section. And because the Apartment property type contains fewer records, an area of white space appears beneath the group.
How to set a variable height for the nested gallery controls
To resolve this issue, we need to set the height of the nested gallery dynamically. To calculate the required height for each child gallery, we take the target number of rows in the child gallery and multiply it by the desired height of each row.
Let's say we want to assign a height of 35 to each row. We would then set the height of the child gallery (galChild) to the following:
CountRows(galChild.AllItems) * 35
The screenshot below illustrates the result. The height of the nested gallery is now sized dynamically and there are no empty spaces or scrollbars.
Conclusion
When displaying related parent-child data through nested galleries, we can size the height of nested galleries to avoid scrollbars or empty white space. This post demonstrated how to carry out this task by walking through an example.- Categories:
- controls
Related posts
- Controls - How to workaround the bug when setting Radio Button fill color dynamically
- Controls - How to build a control to enter measurements in inches with fractional units
- Controls - How to build a component for users to enter numbers with a set of connected slider and text input controls
- Controls - How to use the Tab List control - Examples
- Barcodes - How to scan barcodes - a summary of the 3 available barcode scanning controls
- Controls - How to create multi-line tooltips or multi-line text input control hint text
- Controls - How to add a clickable image / image button
- Controls - Restrict text input control to whole numbers only
- Controls - How to submit a form (or to run formula) when a user presses enter/return on the keyboard
- Controls - How to create rounded labels - workaround
- Controls - How to enter and display Office/Microsoft 365 email addresses with a combo box
- Gallery control - How to set no selected item in a gallery
- Model Driven App - How to apply an input mask to a text input field
- Controls - How to reset or clear data entry controls, and form values
- Controls - How to Transition/Show/Hide controls with a Sliding Effect
- Gallery Control - How to Paginate Data