Skip to main content

Notifications

Power Apps - Building Power Apps
Suggested answer

Positioning Data Cards on a Display Form

Posted on by 4
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:
  • WarrenBelz Profile Picture
    WarrenBelz 143,297 on at
    Positioning Data Cards on a Display Form
    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)
  • ronaldwalcott Profile Picture
    ronaldwalcott 903 on at
    Positioning Data Cards on a Display Form
    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.
  • ronaldwalcott Profile Picture
    ronaldwalcott 903 on at
    Positioning Data Cards on a Display Form
    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
  • JB-26112322-0 Profile Picture
    JB-26112322-0 4 on at
    Positioning Data Cards on a Display Form
    Thanks jpespena,
     
    That seems like a long way to go, but I'll keep it in mind.
  • Suggested answer
    jpespena Profile Picture
    jpespena 264 on at
    Positioning Data Cards on a Display Form
    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!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #7 Community Profile Tips…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 143,297

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 63,890

Leaderboard