CODEWITHSUNDEEP
htmlcssflexbox
transGLUKator
transGLUKator

Reputation: 652

How to fix alignment in flex container?

I have a form. Labels and inputs should always be center-aligned. For this purpose I use

display: flex;
align-items: center;

on the container element. However when error text appears under the input, the label is pushed downwards. Considering the flex behavior it is absolutely correct, but is there a way to fix the alignment between label and input so they are always center-aligned regardless of possible divs below input?

Here is the demo

Also, please take into consideration that the use of flex container is obligatory here.

align-items:baseline;

is also not an option, as there can be a textarea instead of input.

Upvotes: 2

Views: 904

Answers (1)

Guy
Guy

Reputation: 11305

Not with your current markup.

One way you could achieve this would be to add a class onto the parent when there is an error message. Using this class, and a wrapper div around your input and error messages, you could absolutely position the errors beneath the input and add the relevant margin to the bottom of the container.

This way the error messages would be out of the flow and thus the alignment would be as you wanted. 

.form-group.validation-error {
  margin-bottom: 30px;
}

.input-wrap {
  position: relative;
}

.error-message {
  position: absolute;
  top: 40px;
}

Demo

Upvotes: 2

Related Questions