Layout Grid confusion

[jPaul]

Hi Everybody,

I have a Layout Grid, arranged in two equal columns. Each column contains three Editboxes.

In the default view, the display is like this:


However, in the breakpoint view, the display is like this:


The issue I have is that the positional order of the Editboxes is quite different in the breakpoint view. I expect that will make user entry difficult.

I would like to adjust that, so that the order is the same in both views. Can someone explain how, orpoint me to a tutorial to know "how".

[Pablo]

You can set the breakpoint in the properties of the layout grid.

If you need further assistance then please provide a DEMO project, so I can see what you are doing.

[BaconFries]

When sharing images from Dropbox you need to provide the correct url for it to display. The link you gave was using dl=0 where it should be raw=1 I have modified the url for you so that the image displays.

[crispy68]

The way you have the grid setup is the way it works. At the breakpoint, column 2 is going to fall underneath column 1. There is no way to make objects in column 2 intertwine with objects in column 1 when the breakpoint is reached as these are separate containers/areas/columns.

The way you currently have it, you will need to order it like such:

your first name |your email address
your last name | your password
your User name | verify your password

so when the breakpoint is reached it will be:

your first name
your last name
your User name
your email address
your password
verify your password

The only other idea I can think of (but i have not yet tested) is trying to use a flexbox container where each object is 50% width and then set the flexbox container to column in a breakpoint to cause it to stack.

[alan_sh]

You could use a flex grid with one editbox per cell. Then in the other breakpoint, you can re-order them however you want.

Alan

[bkjohns]

I would just reorder the editboxes, ie the left column being the personal info (fname, lname, email) and the right column being the username, password and verification. Then you don't have to worry about the order when reaching a breakpoint.

[crispy68]

As I stated before and bkjohns said, changing the order as you have it would be the easiest solution to do.

However, if you absolutely had to keep it the way you have, I can confirm using a flexbox container will work.

Set the flex container properties to row, wrap, center, center, center.

Insert each editbox into the container and then for each editbox you would set the Flex Basis property to 48% (I set a little below 50% to allow for some spacing).

Then at whatever breakpoint you want it to stack, keep the same flex container settings as before but set the Flex Basis property of each editbox to 100%.