user348173 user348173 - 3 months ago 10
CSS Question

Centralize input label when error class exists

I use horizontal form and custom errors:

<div class="form-horizontal">
<form name="ctrl.myForm" ng-submit="ctrl.save()">
<div class="form-group col-sm-12 text-center">
<color-picker selected="ctrl.selectedColor"></color-picker>
</div>
<div class="form-group has-error">

<label for="logName" class="col-sm-3 control-label">Log Name</label>
<div class="col-sm-9">
<label ng-show="ctrl.logNameHasError" class="control-label" for="logName">
<i class="fa fa-times-circle-o"></i> Input with error
</label>
<input type="text" ng-model="ctrl.logName" class="form-control" id="logName"
placeholder="Enter a new log name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="ctrl.isDailyDigestEmail"> Daily Digest Email
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="ctrl.isNewErrorEmail"> New Error Email
</label>
</div>
</div>
</div>
</form>


Open DEMO please and you will see that
Log Name
field has wrong alignment. How to center it?

Make output window in JSBIN as 768px minimum to see what I mean.

Answer

Use can add css when .has-error class is exists:

.form-group.has-error .col-sm-3.control-label {
    padding-top: 34px;
}