Power Apps – Bordered auto-height row using gallery

10 steps

Introduction:

We will set up a gallery to appear like a table with borders for each cell that adjusts based on the text content of each cell..

Step 1:

Insert a blank flexible height gallery named Gallery1. Change the following properties:

Width property

X property

TemplatePadding property

Items property

Table(
    {
    Col1: "Team Alpha",
    Col2: "Alice, Bob, Carol, David",
    Col3: "Team Alpha is a dynamic group of individuals with diverse skills and backgrounds. 
    They collaborate seamlessly, leveraging their collective expertise to tackle complex challenges. 
    Whether it’s brainstorming innovative solutions or executing meticulous plans, 
    Team Alpha thrives on synergy and camaraderie. 
    Their commitment to excellence drives them to achieve remarkable results."
    },
    {
    Col1: "Project Zephyr",
    Col2: " Emily, Frank, Grace, Henry",
    Col3: "Project Zephyr is an ambitious initiative aimed at revolutionizing renewable energy solutions."
    },
    {
    Col1: "Innovation Squad",
    Col2: "Isabella, Jack, Karen, Liam",
    Col3: " The Innovation Squad thrives on curiosity and creativity. 
    Isabella, the team’s visionary, dreams big and pushes boundaries. 
    Jack, the prototyping guru, turns ideas into tangible prototypes. 
    Karen’s meticulous research provides the foundation, 
    and Liam’s persuasive communication skills secure partnerships. 
    Their shared passion for innovation fuels their quest to disrupt the status quo."
    }
    )

Step 2:

Insert a container named Container1 inside Gallery1 Change the following properties:

X property

Y property

Width property

Step 3:

Insert a label named Label1 inside Container1. Change the following properties:

X property

Y property

Width property

Parent.Width

Text property

ThisItem.Col1

Autoheight property

true

Step 4:

Copy Container1 and paste inside Gallery1. Your new container should be named Container1_1 and your new label inside it should be named Label 1_1. Change the following properties of Container 1_1:

X property

Y property

Step 5:

Copy Container1_1 and paste inside Gallery1. Your new container should be named Container1_2 and your new label inside it should be named Label 1_2. Change the following properties of Container 1_2:

X property

Y property

Step 6:

Select Label1_1. Change the following properties:

Text property

ThisItem.Col2

Step 7:

Select Label1_2. Change the following properties:

Text property

ThisItem.Col3

Step 8:

Select Container1, Container1_1, and Container1_2. Change their following properties:

Height property

Max(Label1.Height,Label1_1.Height,Label1_2.Height)

Step 9:

Select Gallery1. Change the following properties:

TemplateSize property

BorderThickness property

BorderColor property

RGBA(166, 166, 166, 1)

Note: The gallery may appear distorted on the Studio, but once played, it will adjust correctly.

Step 10 (Optional):

Insert 3 separate labels on top of Gallery1 for the headers.

Conclusion:

To test, view the app in play mode and you can see that your table cells automatically adjusts depending on the length of the text inside the cell.

Did this article help? Let us know how we can improve. Send us a message by clicking the “Contact Us” button below.

Article last updated on Mar 1, 2024

View Preview

Need expert guidance on Power Apps?