Check out my bootstrap styled form:
<div class="form-group">
<label for="formEmail">User Email</label>
<div class="input-group">
<select class="form-control" data-rule-emailRequired="true" name="email" id="formEmail">
<option value="default">Please Select Users</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" id="addUserBtn" type="button">Create User</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default" id="newUserBtn" type="button">Add User</button>
</span>
</div>
<ul id="issueUserList" class="list-group list-inline"></ul>
</div>
The data rule validation in the code triggers an error message and pushes the input-group-btn below. See the image linked https://i.sstatic.net/NC23a.png
Here's a snippet of my CSS styling:
.input-validation-error { border: 2px solid red; }
.field-validation-error { color: red; }
label.error {
color: red;
}
input.error, textarea.error, select.error {
color: black;
background-color: #ebccd1;
border-color: #ebccd1;
border: 2px solid red;
}
div #loading {
display: none;
}
.input-group {width: 100%}
#issueTable_length {
margin-top: 2%;
}
.jumbotron {
margin-top: 2%;
}
Can anyone provide some advice or pointers on what could be improved here? Thank you in advance!