form error breaking the layout of inline fields

Question

I have the below layout, the problem is if one of the field error is not there the layout is breaking, even one field has error-wrapper div the layout should not change min height for the input field stays there and errors will show down without breaking

To see the issue you can comment one div which has error-wrapper class

.parent-container {
  display: flex;
  align-items: center;
}

label {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 20px;
  padding-bottom: 4px;
  vertical-align: middle;
  opacity: 1;
}

.select-container-wrapper {
  position: relative;
  box-sizing: border-box;
  width: 175px;
}

.input-container-wrapper {
 display: flex;
 align-items: center;
}

.error-wrapper {
    align-items: flex-start;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
}

<div class="parent-container">
  <div class="select-container">
    <div>
      <label>Option</label>
      <div class="select-container-wrapper">
        <select>
          <option value="1">Test</option>
        </select>
      </div>
       <div class="error-wrapper">
         Error Occured
      </div>
    </div>
  </div>
  <div class="input-container">
    <div>
      <label>Number</label>
      <div class="input-container-wrapper">
        <input />
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="css-14z50xn-InventoryWidget" height="1.25rem" width="1.25rem" xmlns="http://www.w3.org/2000/svg"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
        </svg>
      </div>
      <!-- If i comment this line the layout breaks -->
       <div class="error-wrapper">
         Error Occured
      </div>
      <!--till here -->
    </div>
  </div>
</div>

score 1 · Accepted Answer · answered Sep 14 '21 at 18:53

1

You don't have a min-height set for any component. And your parent container is set to align center.

Either remove this from .parent-container

align-items: center;

Or set a minimum height for the wrapping div

.select-container > div, .input-container>div{min-height:80px}

Then when you remove the error-wrapper, the elements appear unchanged.

answered Sep 14 '21 at 18:53

Phaelax z

1,814
1
7
19

removing align-items: center, thanks @Phaelax for the quick support :) – dev Sep 14 '21 at 18:57
I had one doubt regarding on this question https://stackoverflow.com/questions/70063149/event-timeline-with-animation If you can help me on this it will be really helpful, many thanks – dev Nov 23 '21 at 10:55

form error breaking the layout of inline fields

1 Answers1