The rogue wrap-around

When you are designing a (particularly larger) form with a lot of fields and have many card widths different to the standard “equal width” automatically set by Power Apps, you get a long way in, change a card width and suddenly the whole screen of cards rearranges itself to something quite different than the items per line you planned? Sometimes this is a nightmare to fix (you fix one line and another breaks). So how do you avoid (or more accurately) mitigate the effect?

Firstly, frequently you will have a need for different numbers of cards per line and within this naturally different card widths. You may also have a need for the widths of all the cards on the particular line to equal the form width.

Some fundamentals when you have this requirement: –

• Set the cards per line at the maximum number you will need.
• If
  • The number on the line is more than one (full width cards are common), AND
  • One of the full-width cards is not immediately below the line AND
  • it is not the bottom line
    Put a custom card one pixel high and the width of the form underneath the line.
• Avoid setting the “final” width of at least one card before you have finished (in other words, leave at least 10 pixels space between the end of the last card and the right edge of the form). You can fix them all when you have finished and everything is where you want it to be.
• If you get a “rogue wrap” now, it will be confined to single lines (they will become two lines, but can be fixed one at a time without affecting anything else).

When you get a rogue wrap, this is what you do

• Reduce the size of one of the cards on the line affected (you may need to take up to 100 pixels off).
• Go into Edit on the form and swap the position of two of the cards on the line then swap them back again. The cards will then “snap” back onto the single line.
• Put the width of the card back to what it was.