CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Miuranga
Miuranga

Reputation: 2463

HTML required validation message style issue in Bootstrap from field

In my Bootstrap form field with the calendar icon and it's required. However when the error massage is showing it's going to be mess like below image. enter image description here

HTML code is 

<div class="input-group">
     <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
     <input type="text" value="" class="form-control error" name="from" id="from" required">
 </div>

Bootstrap CSS below

 .input-group-addon, .input-group-btn, .input-group .form-control {
        display: table-cell;
    }
.input-group-addon, .input-group-btn {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
.input-group-addon {
    background-color: #eeeeee;
    border: 1px solid #cacaca;
    border-radius: 3px;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
}
.input-group .form-control {
    float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

HTML5 required error

<label id="from-error" class="error" for="from">This field is required.</label>

So HTML code is like below when error occur

<div class="input-group">
     <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
     <input type="text" value="" class="form-control error" name="from" id="from" required">
<label id="from-error" class="error" for="from">This field is required.</label>
 </div>

So How to fix this and set calendar Icon with in lining the field?

Upvotes: 0

Views: 1511

Answers (2)

nashcheez
nashcheez

Reputation: 5183

Since all the elements inside input-group are display: table-cell, you have to provide display: table-row to the label for it to appear in new line (in a different row as in a table).

EDIT

In case, you want the error to appear exactly below the input and start right after the calendar icon, I would suggest you to use position: absolute instead.

Check edited code snippet:

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}

.input-group-addon,
.input-group-btn {
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

.input-group-addon {
  background-color: #eeeeee;
  border: 1px solid #cacaca;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 12px;
  text-align: center;
}

.input-group .form-control {
  float: left;
  margin-bottom: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}

/* #from-error {
  display: table-row;
} */

#from-error {
    position: absolute;
    bottom: -32px;
    left: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
  <input type="text" value="" class="form-control error" name="from" id="from" required>
  <label id="from-error" class="error" for="from">This field is required.</label>
</div>

Upvotes: 1

ram pratap singh
ram pratap singh

Reputation: 53

try this may work

 <div class="input-group">
 <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
 <input type="text" value="" class="form-control error" name="from" id="from" required">
 </div>
  <label id="from-error" class="error" for="from">This field is required.</label>

Upvotes: 0

Related Questions