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 Text box 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.

Final app

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

  1. Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Flooring products

  2. Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.

  3. In PowerApps Studio, click or tap New on the File menu.

  4. On the Blank app tile, click or tap Phone layout.

    New option on the File menu

  5. Add a connection to the FlooringEstimates table in the Excel file.

    For more information, see Add a connection.

Add data to a gallery

  1. On the Insert tab, click or tap Gallery, scroll to the bottom of the menu, and then click or tap Flexible height.

    Add gallery

  2. Resize the gallery to take up the entire screen.

  3. Set the gallery's Items property to FlooringEstimates.

Show the product names

  1. In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Pencil icon

  2. With the gallery template selected, add a Text box control to it.

  3. Set the Text property of the Text box control to this expression:
    ThisItem.Name

    Add text box

Show the product overviews

  1. With the gallery template selected, add another Text box control, and move it below the first Text box control.

  2. Set the Text property of the second Text box control to this expression:
    ThisItem.Overview

  3. With the second Text box control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Rename text box

  4. Set the AutoHeight property of the OverviewText box to true.

    This step ensures that the box will grow or shrink to fit its contents.

    Text auto height

Show the product images

  1. 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.

  2. With the gallery template selected, add an Image control, and move it below the OverviewText box.

  3. Ensure that the Image property of the Image control is set to this expression:
    ThisItem.Image

  4. Set 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

    Final app

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.