If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain less data. Add and configure a Flexible height gallery control so that you can:
- Configure Label controls to expand or shrink based on their contents.
- Position each control so that it automatically appears just under the control above it.
In this tutorial, you show data about flooring products in a Flexible height gallery control. The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.
Suggested reading
If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.
Add data to a blank app
Download this Excel file, which contains names, overviews, and links to images of flooring products.
Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
In PowerApps Studio, click or tap New on the File menu.
On the Blank app tile, click or tap Phone layout.
Add a connection to the FlooringEstimates table in the Excel file.
For more information, see Add a connection.
Add data to a gallery
On the Insert tab, click or tap Gallery, and then click or tap Flexible height.
Resize the gallery to take up the entire screen.
Set the gallery's Items property to FlooringEstimates.
Show the product names
In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.
With the gallery template selected, add a Label control to it.
Set the Text property of the Label control to this expression:
ThisItem.Name
Show the product overviews
With the gallery template selected, add another Label control, and move it below the first Label control.
Set the Text property of the second Label control to this expression:
ThisItem.OverviewWith the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.
Set the AutoHeight property of the OverviewText box to true.
This step ensures that the box will grow or shrink to fit its contents.
Show the product images
Resize the template so that it's twice as tall as it was.
You can add controls to the template more easily as you build the app, and this change won't affect how the app looks when it runs.
With the gallery template selected, add an Image control, and move it below the OverviewText box.
Ensure that the Image property of the Image control is set to this expression:
ThisItem.ImageSet the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
OverviewText.Y + OverviewText.Height + 5
Apply the same concept if you want to add more controls: set each control's Y property based on the Y and Height properties of the control above it.
Next steps
Learn more about how to work with a gallery control and formulas.