This form issue is not a bug, it's a CURSE

Often,

  • when I use 2 columns with 1 column for form fields,
  • instead of 1 column with 2 rows,
  • and I set focus on an input,
    this weird glitch happens where the whole form field group moves to the side.

Can anybody help me get away of this prison of single column design?
Every time I try two columns, this happens.

How have you defined the sizing, layout etc. of the involved elements?

2 Likes

I’ve never experienced that. Must be some setting somewhere on element or styles that is causing it in your app.

1 Like

It’s a simple group with two elements
The label and the input.

Label is set as:
width: 160px (fixed)
min-height: 0px
max-height: inf

Input is set as:
min-width: 0
max-width: inf
min-height: 44px
max-height:inf

Group is set as:
min-width: 0px
max-width: inf
min-height: 0px
max-height: inf

Also it worths noting that focus doesn’t change anything (border width, width, height, etc)

Probably :joy:

Can you show a video? Show what is happening and all of your editor settings for the layout of those elements and group. :blush:

Please share a screenshot of the Properties menu → Layout tab of the following:

  • Group
  • Label
  • Input



what is the conditional on Text Email*

I have no clue why focusing the input can cause this behaviour but…

what if you set a min. width for the Input Client's email element? (the same min. width the rest of the inputs have, should you want them alligned).

@lucaspiccoliw can you send a link to your editor so we can quickly take a look at it?

Unrelated, nothing to do with input focus.

Unfortunately I can’t. :slight_smile:

I’ll try… but don’t think this is the issue.

What’s in the conditional?


I push it to 100% width so it becomes a single column on Tablet or less.
But even if I delete this condition, the behavior doesn’t change.

Do you have a password manager extension installed e.g LastPass? If yes, does disabling it resolve it?

2 Likes

remove fixed width, let it stretch with a min width to 30% for your text and 70% for your inputs
or use a min width as pixels of 100 or something that you are happy with

Jesus Christ you are right. I’ll implode last pass from my browser straight away.
Nailed it.

Thaaaaaaanks!

1 Like

Wow this even wasn’t on the bets