I`m using Bootstrap v3.2. I have a inline-form but I want to show a error message, but its not nice:
Is there a way to do this:
HTML:
<div class="jumbotron">
<p class="lead">{{errorMsg}}</p>
<form class="form-inline" role="form" name="loginForm">
<div class="form-group">
<input class="form-control" ng-model="user.name" type="text" placeholder="Gebruikersnaam" required>
<div>
<span style="float:left" class="glyphicon glyphicon-warning-sign"></span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" ng-model="user.password" placeholder="Wachtwoord" required>
</div>
<button onclick="javascript:void(0)"class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
</form>
</div>
The problem is that the input goes up and I don`t want that.
Please try to use this snippet
HTML:
<div class="jumbotron">
<p class="lead">{{errorMsg}}</p>
<form class="form-inline" role="form" name="loginForm">
<div class="form-group">
<input class="form-control" ng-model="user.name" type="text" placeholder="Gebruikersnaam" required>
<div>
<span class="glyphicon glyphicon-warning-sign error-sign"></span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" ng-model="user.password" placeholder="Wachtwoord" required>
</div>
<button onclick="javascript:void(0)"class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
</form>
</div><div class="jumbotron">
<p class="lead">{{errorMsg}}</p>
<form class="form-inline" role="form" name="loginForm">
<div class="form-group has-warning has-feedback">
<label class="control-label sr-only" for="username">Gebruikersnaam</label>
<input class="form-control" ng-model="user.name" id="username" placeholder="Gebruikersnaam" required="" type="text">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group">
<input class="form-control" ng-model="user.password" placeholder="Wachtwoord" required="" type="password">
</div>
<button onclick="javascript:void(0)" class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
</form>
</div>
CSS:
.form-inline .form-group {
vertical-align: top;
}
.error-sign {
float:left;
margin-top: 7px;
}
You can see that here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With