Align Error Message Under Input - HTML/CSS

user_9310838 0
Viewed 3172

I have the following images that represent each case for user input-validation.

No Error:

enter image description here

Input Error:

enter image description here

I would like to maintain the alignment of the upper image while moving the error message underneath the input field (keep Label on left and Input on right, place error message underneath and aligned with input).

.group {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 4px;
}

.group label {
  display: flex;
  width: 15%;
  line-height: 30px;
  justify-content: center;
  align-items: center;
}

.group input[type="text"] {
  width: 85%;
  border: 1px solid rgb(116, 115, 115);
  padding-left: 3px;
}

.group textarea:focus,
input:focus {
  outline: none;
}

.group .errorMsg {
  color: #cc0033;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin: 5px 0 0;
  width: 100%;
}

.group .errorMsg {
  display: none;
}


/* Error Styling */

.err label {
  color: #cc0033;
}

.err input[type=text] {
  background-color: #fce4e4;
  border: 1px solid #cc0033;
  outline: none;
}

.err .errorMsg {
  display: inline-block;
}
<div class="group err">
  <label for="time">Time</label>
  <input type="text" name="time" id="time" />
  <div class="errorMsg">Invalid Time Format</div>
</div>
<div class="group">
  <label for="time2">Time2</label>
  <input type="text" name="time2" id="time2" />
  <div class="errorMsg">Invalid Time Format</div>
</div>

Any recommendations to fix the poor alignment?

css html
1 Answers

You can align them like this. I have added comments to the right of the changes.

.group {
  display: flex;
  flex-wrap: wrap; /* Wrap the elements */
  margin-top: 4px;
}

.group label {
  display: flex;
  width: 15%;
  line-height: 30px;
  justify-content: center;
  align-items: center;
}

.group input[type="text"] {
  width: 85%;
  border: 1px solid rgb(116, 115, 115);
  padding-left: 3px;
  flex: 1; /* Take the remaining width */
}

.group textarea:focus,
input:focus {
  outline: none;
}

.group .errorMsg {
  color: #cc0033;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin: 5px 0 0;
  width: 100%;
}

.group .errorMsg {
  display: none;
}


/* Error Styling */

.err label {
  color: #cc0033;
}

.err input[type=text] {
  background-color: #fce4e4;
  border: 1px solid #cc0033;
  outline: none;
}

.err .errorMsg {
  display: flex; /* Instead of inline-block */
  width: 85%; /* Same as input width */
  left: 15%; /* Rest of the width */
  position: relative; /* Relative to parent */
  
}
<div class="group err">
  <label for="time">Time</label>
  <input type="text" name="time" id="time" />
  <div class="errorMsg">Invalid Time Format</div>
</div>
<div class="group">
  <label for="time2">Time2</label>
  <input type="text" name="time2" id="time2" />
  <div class="errorMsg">Invalid Time Format</div>
</div>

user_48139130
Related