Form with collapsible/expansible sections leaves gap when sections are collapsed

(0) Share

Report

Posted on by julienvdc

210

Hey I am trying to build a form with multiple columns. I created sections by adding a data card each time as a section in-between the form fields.

I've ordered all the fields of my form using X,Y positions.

Now I am inserting a button at each section to collapse sections; I am essentially hiding fields under a section using variable that switches between true and false.

However when I am hiding fields, it leaves gaps and the section below doesn't shift up. I've read my post about this issue but never found something that would really do the trick. Also most of these posts are a bit old so I wondered if anyone had discovered any new solution since then?

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (0)

Sort by

jayceeb 94 on at

Like
a
(0)

Report
Copy link

Link copied!

try this copy snippet https://www.powerappstools.com/snippet-details/192

Was this reply helpful? Yes No
Suggested answer

11manish 3,333 on at

Like
a
(0)

Report
Copy link

Link copied!
This happens because of how Forms layout works in Microsoft Power Apps.

Even if you hide a DataCard, the Form layout engine still reserves its position, so the controls below do not move up, which creates those empty gaps.

Your current approach using X/Y positioning is the main reason the layout cannot dynamically rearrange.

Use the Visible + Height trick

For each DataCard inside a section:

Visible

varTransportSection

Height

If(varTransportSection, Parent.TemplateHeight, 0)

But this works best when:

form layout = vertical

not heavily dependent on manual X/Y positioning

Best Practice: Use Containers (Recommended)

Modern Power Apps layouts use Containers instead of manual X/Y.

Use:

Vertical Container → sections

Horizontal Container → columns

Was this reply helpful? Yes No
Suggested answer

Kalathiya 2,456 Super User 2026 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!
Hello @julienvdc,

This happens because the Visible property only hides the control visually, but Power Apps still keeps the space in the layout. That’s why the section below doesn’t move up and you see empty gaps.

A common workaround is to also control the Height of the card/section when it’s hidden.

Height:

If(varSection1, Parent.Height, 0) //Parent.Height - will use the height of the data card or container. You may need to adjust this depending on your layout

So the section only takes space when the variable is true, and collapses without leaving gaps.

For more details:

https://www.youtube.com/watch?v=vmL1op2JNGs

https://www.c-sharpcorner.com/article/expandable-and-collapsible-tables-in-powerapps/

If this response resolves your issue, please mark it as the Verified Answer so it can help other community members as well.

---------------------------------------------------------------------------------

📩 Need more help? Mention @Kalathiya anytime!
✔️ Don’t forget to Accept as Solution if this guidance worked for you.
💛 Your Like motivates me to keep helping!

Was this reply helpful? Yes No
julienvdc 210 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi guys, thanks for the quick answers. Indeed this is also what I was getting after a few chats with Copilot :-), the height trick, but it didn't seem to change anything...

For the parent.height trick to work I would need each datacard to be inserted into a container of its own , no? Because otherwise I just takes the height of form...

Also, I started structuring the form with X,Y positions because I wanted some fields on their own line. But I understand using X,Y positions makes the collapsible behavior difficult?

I created this form a few years ago, would the new modern form handle this differently?

Was this reply helpful? Yes No
Kalathiya 2,456 Super User 2026 Season 1 on at

Like
a
(1)

Report
Copy link

Link copied!
Hello @julienvdc,

You don’t necessarily need a container. You can also control the Height of the DataCard (or section) using your variable so that it collapses completely.

Height:

If(varSection1, 80, 0) //or instead of this use form control height

When varSection1 is false, the card height becomes 0, so the fields below will move up and the gap will be removed.

If this response resolves your issue, please mark it as the Verified Answer so it can help other community members as well.

Was this reply helpful? Yes No