Hidden fields still taking up space - fields not wrapping correctly

[cattre]

Hi,

Bit of a tricky one to explain but basically I have a few different view/edit forms (using the same SP list data source) and depending on the type of item being viewed, some of these fields are not relevant and therefore hidden. When this happens, the proceeding fields move to the left to fill the gaps BUT they do not move to the previous line if there are gaps there.

I noticed the containers of hidden fields were still taking up space so painstakingly set all of these to 0 if hidden, e.g. on the WIdth property:

If('Field Name_DataCard1'.Visible=true,226,0)

This helped a lot, but there is still an issue where the same form is viewed for different items. It seems like I am only able to get the layout working correctly for a certain field configuration. If I get it all lined up with the fields in the correct place (e.g. for an item with all fields visible), then I subsequently view an item that has some fields hidden, the remaining fields won't always fill the gaps. It seems a bit random where the line break occurs - e.g. on one form, two consecutive but hidden (i.e. zero-width) fields appear on separate lines (by "appear", I mean when you select them in the tree view pane and can see their containers, which are just a single vertical line).

I've read the doc (https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/working-with-form-layout) but can't see anything covering this exact scenario.

The app is set up in default landscape mode (16:9), with scale to fit, lock aspect ration, and lock orientation all enabled. Within each canvas I am using a 12-column vertical layout, with snap to columns enabled.

Thanks!

[iAm_ManCat]

Hi,

I've recently written a twitter post about this - if you are not using your hidden columns at any point, move them all to the bottom of the form, as they still take up a 'column' within each row they are present on so if you have 3 columns and a few cards:

X (X) X
X (X) (X)
X X (X)

X's in () are hidden, then it will display:
X X

X

X X

but if you move them all around to the bottom:
X X X

X X (X)

(X) (X) (X)

Then it will show as:

X X X

X X

Let me know if you need any further details - you did the right move by increasing column count to twelve, that helps a lot, but that still means each 'row' needs 12 cards before it inserts a line break, so the hidden cards can play a factor.

Cheers,

Sancho

[cattre · Accepted solution]

Hi @iAm_ManCat thanks for your reply.

Unfortunately that won't work in my case, the fields are not always hidden and need to be in the order they are in currently. I do have several never-visible fields as well, these are all at the end already.

I didn't think to count the fields on each row to see if the limit of 12 was the cause of the break. However, it doesn't seem to be in my case - one of the rows in my form breaks after 5 fields, with the following configuration:

1 2 3 4 5
6 7 8
9 10 11 12 13

14 (15) (16) (17)

As I mentioned, this looks to be because the configuration of the fields when all are visible is set up like this. Other views of the same for (i.e. different item types):

1 2 (3) (4) (5) 6 7 8

9 10 11 12 13 14 15 16 (17)

1 2 (3) (4) (5) 6 7 8

(9) (10) (11) (12) (13) 14 15 (16) (17)

So, because I have set it up with 1-8 on the first row, when all are visible it wraps to the next line but then truncates at 8 (even though there is space for 9).

It's actually helped to write it out as above (thanks for that!) as it made me look at the possibilty of arranging all of the fields when hidden, so that they are all on the same row (and therefore will wrap only when needed). I set the item to be blank and (again labouriously) set the Visible properties so the fields won't show if there is no item:

If(IsBlank(item),false,true)

I had to do fiddling around but got them all on the same row and this gives me the result I need.

Really long-winded though, especially as I'm going to have to repeat the above for my other pages/apps. Would be much easier if the fields just realigned as needed.

[iAm_ManCat]

Awesome, thanks for sharing how you overcame it!

Yeah, totally agree that it would be better if they wrapped only what was visible (this makes the most sense to me) and I've had to do what you've done for many forms.

Another way (again, laborious) of doing it is to use a gallery with 1 custom DataCard, and then have your X & Y, W & H values for each control within that depend on the variables that show/hide values, that way they will Always be exactly where you want them, then patch your data source instead of using Submit.

Long-winded, but gives you much more flexibility in terms of control placements and arrangements

Thanks again for sharing how you resolved it,

Cheers,

Sancho

[zmansuri]

Hi, i am facing the similar issue. Some fields are hidden. and displays based on certain condition. Can you explain your process in detail. Thank you.