cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
EdHansberry
Kudo Collector
Kudo Collector

Struggling to understand how to move data cards around on an Edit Form

I have turned off "snap to" and in general understand you cannot just drag and drop cards (don't know why, but I understand that.)

 

I have been trying to position cards using X/Y coordinate. I had one card that was at 0/390 and 567 units wide. All the cards above it were:

0/0, 567,0

0/110, 567,110

0/190, 567,190

 

etc. In other words, every card was 567 wide, and I wanted 2, but I needed to tweak some at the bottom to be 3/4 wide, so couldn't use snap to. When I got to around 450 on the y axis, I had one that was:

0/450, and 567 wide.

 

could not get any card to be next to it. I tried 567,450 (should have worked) and made it 1 pixel wide just to see if it would fit. I never could get it to work. I eventually just deleted all of the cards below where I was, and added them back. Then it put them where I wanted.

 

I tried saving/closing/restarting the browser, because I know the dev space gets wonky sometimes, but that didn't help. Nothing but deleting/readding would work.

 

Am I doing something wrong, or is this part of the environment just frustrating?

1 ACCEPTED SOLUTION

Accepted Solutions
Eelman
Super User
Super User

@EdHansberry datacards inside Forms are just ... difficult to manipulate for viewing. The way I understand them is there are fixed columns & rows and you can't move outside of that "grid-style" visual.

 

But, to maybe get what you want you could try setting the Columns to 4. You can then have cards that are 1/4 width, 2/4 width, 3/4 width or 4/4 width, if that makes sense. So this solve your 2/per row requirement as well as your 3/4 with card requirement.

 

Once you set the columns to 4, try snap to columns ON then OFF. This will move all the cards into 4 columns but then 'unlock' them for moving around.If you wanted cards 1 & 2 to cover the entire 1st row, select card 1 and drag it's RH border across to cover columns 1&2, then select card 2 and drag it's RH border across to cover columns 3&4. Cards 1&2 should now cover row 1. 

 

To get a 3/4 width card further down, select that card and drag it's RH border to cover 3 columns.

 

You can play around with the column width number to suit your needs.

 

Other than the above, I've never had much success in formatting the layout of Forms but hopefully this helps!

View solution in original post

4 REPLIES 4
Eelman
Super User
Super User

@EdHansberry datacards inside Forms are just ... difficult to manipulate for viewing. The way I understand them is there are fixed columns & rows and you can't move outside of that "grid-style" visual.

 

But, to maybe get what you want you could try setting the Columns to 4. You can then have cards that are 1/4 width, 2/4 width, 3/4 width or 4/4 width, if that makes sense. So this solve your 2/per row requirement as well as your 3/4 with card requirement.

 

Once you set the columns to 4, try snap to columns ON then OFF. This will move all the cards into 4 columns but then 'unlock' them for moving around.If you wanted cards 1 & 2 to cover the entire 1st row, select card 1 and drag it's RH border across to cover columns 1&2, then select card 2 and drag it's RH border across to cover columns 3&4. Cards 1&2 should now cover row 1. 

 

To get a 3/4 width card further down, select that card and drag it's RH border to cover 3 columns.

 

You can play around with the column width number to suit your needs.

 

Other than the above, I've never had much success in formatting the layout of Forms but hopefully this helps!

View solution in original post

v-monli-msft
Community Support
Community Support

Hi @EdHansberry ,

 

For documentation about customizing layout of data-form control, please refer to:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/working-with-form-layout

 

Regards,

Mona

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Thanks @Eelman and @v-monli-msft . At least I know I'm not crazy. Thanks for the link too. I looked yesterday and found a good one but it was for Model driven, not Canvas. Now I have some Canvas reading to do on this.

 

But yeah, it seems more difficult than it should be for a GUI environment.

AlanBourke
Helper I
Helper I

As far as I know PowerApps layouts work using the Bootstrap grid system underneath. Or if they don't, they certainly emulate something very like it. So a quick scan over how that works might help.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Did you miss the call? Check out the recording here!

Top Solution Authors
Top Kudoed Authors
Users online (27,191)