Bootstrap inline form button alignment
10,158
Adding this CSS aligns the form correctly again:
.form-inline > .form-group {
vertical-align: top;
}
Comments
-
Shane almost 2 years
Button alignment after validation not proper.
<form class="form-inline form-padding"> <div class="form-group"> <div class="input-group"> <input class="form-control" placeholder="First Name" name="firstname" type="text" /> </div> </div> <div class="form-group"> <div class="input-group"> <input class="form-control" placeholder="Last Name" name="lastname" type="text" /> </div> </div> <div class="form-group"> <div class="input-group"> <button type="submit" id="form-button" class="btn btn-primary">Load</button> </div> </div> </form>
Validation code:
$('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } });
The form works great, but the moment i click on Load button the alignment of button is not proper. I could not create a fiddle, i have attached the screen-shot of the same.
Before Form Submission
After Form Submission
Button alignment after validation not proper.
-
thouliha about 9 yearsThis was a lifesaver. Thanks so much. They really need to add this to the bootstrap validator website.