Css - How to align the inputs with multiline error in bottom-aligned form?

AlinaAndrieieva
January 11, 2024
179 views
2 votes
3 Answers

I have a form with the bottom-aligned behaviour, I need all the inputs in a row to be aligned to the bottom and be on one line visually. The reason for this is that the label can include instructions or not include them. The controls can be of different hight and type (text input, select, radio group, checkbox group, fieldset).

I use the align-self: end;to make the control div to be aligned to the bottom. It works fine when I have one-line error
But it doesn’t look good when I have multi-line error.

Can anyone suggest how to align the controls properly using the CSS (maybe grid…)?

The desired result (the right input is located one the same line as the left one):

Thank you!

body {
  padding: 50px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

.form {
  display: flex
}

.error {
  color: red;
  padding: 5px 0
}

.form-item {
  border: 5px solid rgb(111, 41, 97);
  display: grid;
  inline-size: 300px;
}

.label {
  background: orange;
}

.control {
  background: #eee;
  padding: 10px;
  /*   display: grid; */
  align-self: end;
}

.input {}

<form class="form">
  <div class="form-item">
    <div class="label">
      <div>Label </div>
      <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction </div>
    </div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Long error Long error Long errorLong errorLong errorLong errorLong errorLong errorLong error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
    </div>
  </div>
  <div class="form-item">
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Short error</div>
    </div>
  </div>
</form>

Answers

Depending on the rest of your layout or other requirements you could use css-grid in order to get your desired layout.

If you remove the divs around each input and label, you could just use a grid, which flows in the column direction. The height of the rows will be defined by the largest item and therefore affect the other control-divs as well.

.form {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
}

.error {
  color: red;
  padding: 5px 0;
}

.label {
  background: orange;
}

.control {
  background: #eee;
  padding: 10px;
}

 <form class="form">
    <div class="label">
      <div>Label</div>
      <div style="color: grey">
            Long instructionsLong instructionsLong instructionsLong instructions
            Long instructions Long instructionsLong instructionsLong
            instructionsLong instructions Long instruction sjhdjsdhdjshdsj
            hsdjhsdssdhj jshdsjhjsh hjsdhdjsdhjshjdhjdshdjssdhjdhsjdshjsdd
            jhjshdhjdsdhjsdhj
      </div>
    </div>
    <div class="control">
      <div class="input"><input type="text" /></div>
      <div class="error">
            Long error Long error Long errorLong errorLong errorLong errorLong
            errorLong errorLong error Long error Long errorLong errorLong
            jhsdhsjdhsjdh
      </div>
    </div>
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text" /></div>
      <div class="error">Short error</div>
    </div>
 </form>

you could use that site for grid helper: for more https://cssgrid-generator.netlify.app/

    
    body {
        padding: 50px;
        font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    .form {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* for more https://cssgrid-generator.netlify.app/ */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    @media only screen and (max-width: 600px) {
        .form {
    grid-template-columns: repeat(1, 1fr);
        }
    }

    .error {
        color: red;
        padding: 5px 0
    }

    .form-item {
        border: 5px solid rgb(111, 41, 97);
        display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    
    }

    .label {
        background: orange;
    }

    .control {
        background: #eee;
        padding: 10px;
    
    }

    <form class="form ">
        <div class="form-item">
        <div class="label">
            <div>Label </div>
            <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction </div>
        </div>
        <div class="control">
            <div class="input"><input type="text"></div>
            <div class="error">Long error Long error Long errorLong errorLong errorLong errorLong errorLong errorLong error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
        </div>
        </div>
        <div class="form-item">
        <div class="label">Label</div>
        <div class="control">
            <div class="input"><input type="text"></div>
            <div class="error">Short error</div>
        </div>
        </div>
        
    </form>

alternative solution are:

you can give line-clamp for texts.
for text div: height:100px; overflow-y:auto;

Based on your html, you can apply .form-item { grid-template-rows:subgrid; }. Here is a simple example:

body {
  margin: 0;
}

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
}

.error {
  color: red;
  padding: 5px 0
}

.form-item {
  border: 5px solid rgb(111, 41, 97);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.label {
  background: orange;
}

.control {
  background: #eee;
  padding: 10px;
}

<form class="form">
  <div class="form-item">
    <div class="label">
      <div>Label </div>
      <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction </div>
    </div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Long error Long error Long errorLong errorLong </div>
    </div>
  </div>
  <div class="form-item">
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Short error</div>
    </div>
  </div>
  <div class="form-item">
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">errorLong errorLong errorLong errorLong error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
    </div>
  </div>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How to align the inputs with multiline error in bottom-aligned form?

Answers