Positioning Data Cards on a Display Form

(1) Share

Report

Posted on by JB-26112322-0

Hello,

Hate to post here but I'm about 3 hours, 20 Bing searches, 3 YouTube videos into this and I just can't seem to get any traction.

I have a form that wants to be laid out like this—two columns (wide left, narrow right) with Title and Instructions on the left (wide values); and Analyst, Supervisor, Recipients, CC Recipients on the right (narrow values).

After a couple of hours of messing around, I've got this:

I can't get the data cards in the columns that I want them to be in.

I've turned snap on and off, tried arranging things in a single column, 2 columns, 12 columns.

Manually dragging a data control to the desired position doesn't work. Sometimes I can get it to change columns, but when it does it disrupts the positions of the other elements.

X and Y positioning Data Card values don't seem to work. I watched one video where they said the X and Y values don't do anything; another where the X value is the column and the Y value is the position of the item in that column. X and Y values don't persist and change automatically. It remains a mystery.

I've tried dragging bits of the form outside of the form container. That doesn't seem to work.

At times the height values of a data card will suddenly jump up occupy the entire form height; sometimes data cards seem to be re-sizeable, sometimes not. Resizing a data card seems to sometimes work, but then after a while the values will jump back to some unknown value.

I've tried changing the column order on the underlying SharePoint list to maybe get them generally in the order I want, but that doesn't really address the problem (grasping at straws a lot today).

I've tried looking for objects inside the data card that might be causing it to be un-re-sizeable (as suggested in one or two of the blog posts), but nothing seems more than a few pixels away from the top (doesn't seem like there's anything that would cause it to jump up to full height).

I've tried throwing the form away and adding it again, but I always end up in the same place.

Surely there must be something obvious and elementary that I'm just messing up, but I can't seem to figure out what.

I know how to do thing in HTML and CSS but HTML and CSS doesn't seem to apply to Power Apps except at a very abstract level.

Any tips or guidance here would be much appreciated. Thanks. Happy Thanksgiving.

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (0)

Sort by

Suggested answer

jpespena 335 on at

Like (1)

Report
Copy link

Link copied!

Hi,

What I do when I need to build a custom form in Power Apps is I build the components using containers and input components like text input and dropdown and arrange them as I wanted like this:

Then I add a hidden Form control and for each data cards, I remove the components inside and set the value of the Update property of the data card to the field in the custom form, for example for the data card FirstName, I set the Update property to FirstNameTextInput.Text.

You will also have to handle data validation on the custom form just like I did with the red dots for the required fields.

If my post helped resolve your issue, please click Accept as Solution—this helps others find it more easily and marks the item as closed. If you found this or my previous reply helpful, a Like would also be appreciated!

Was this reply helpful? Yes No
JB-26112322-0 6 on at

Like (0)

Report
Copy link

Link copied!

Thanks jpespena,

That seems like a long way to go, but I'll keep it in mind.

Was this reply helpful? Yes No
ronaldwalcott 3,866 Moderator on at

Like (0)

Report
Copy link

Link copied!

Are you using the new Form or the old form?

In the new form you can adjust as follows

X and Y treat the datacards as matrix positions so

would be

and width of the data cards can be set to whatever value

Was this reply helpful? Yes No
ronaldwalcott 3,866 Moderator on at

Like (0)

Report
Copy link

Link copied!

You could add some "blank datacards" to create an approximate layout to the one that you want. The blank datacard is a regular datacard with most of it invisible.

Was this reply helpful? Yes No
WarrenBelz 155,283 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Another suggestion - make the cards on lines 3 and 4 full-width and position your controls over to the right where you need them.

However there are some fundamental rules (if you have not worked them out yet) in that every data card on a row will take the height of the tallest one, so you cannot have a card spanning two rows (I am not sure if this is what you are trying to do)

Was this reply helpful? Yes No