In one of my assignments I have to perform some form validation. Everything is fine,apart from the fact that the Number of Stars label isn't aligned with the radio buttons. I am providing you the code.
https://jsfiddle.net/m8nwnc8a/29/
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{ 'has-error':
commentForm.author.$error.required &&
!commentForm.author.$pristine }">
<label for="author" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author"
name="author" placeholder="Enter Name"
ng-model="userComment.author" required>
<span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="commentForm.author.$error.required &&
!commentForm.author.$pristine" class="help-block">
Your name is required.
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of stars</label>
<div class="radio col-sm-9">
<label class="radio-inline control-label">
<input type='radio' name="rating" value="1" ng-model="userComment.rating">1
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="2" ng-model="userComment.rating">2
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="3" ng-model="userComment.rating">3
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="4" ng-model="userComment.rating">4
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5
</label>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
commentForm.comment.$error.required &&
!commentForm.comment.$pristine }">
<label for="comment" class="col-sm-2 control-label">Comment</label>
<div class="col-sm-10">
<textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required>
</textarea>
<span ng-show="commentForm.comment.$error.required &&
!commentForm.comment.$pristine" class="help-block">
Your comment is required.
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="commentForm.$invalid">Send Comment</button>
</div>
</div>
</form>
Any ideas?
Thanks Theo.
PS. Don't worry about the different directives like ng-show,ng-click or ng-model.
Change:
<label class="col-sm-3 control-label">Number of stars</label>
<div class="radio col-sm-9">
To:
<label class="col-sm-2 control-label">Number of stars</label>
<div class="col-sm-10">
You can align it like this-- just look at the position of the label.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{ 'has-error':
commentForm.author.$error.required &&
!commentForm.author.$pristine }">
<label for="author" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author"
name="author" placeholder="Enter Name"
ng-model="userComment.author" required>
<span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="commentForm.author.$error.required &&
!commentForm.author.$pristine" class="help-block">
Your name is required.
</span>
</div>
</div>
<div class="form-group">
<div class="radio col-sm-9">
<label class="col-sm-3 control-label">Number of stars</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="1" ng-model="userComment.rating">1
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="2" ng-model="userComment.rating">2
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="3" ng-model="userComment.rating">3
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="4" ng-model="userComment.rating">4
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5
</label>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
commentForm.comment.$error.required &&
!commentForm.comment.$pristine }">
<label for="comment" class="col-sm-2 control-label">Comment</label>
<div class="col-sm-10">
<textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required>
</textarea>
<span ng-show="commentForm.comment.$error.required &&
!commentForm.comment.$pristine" class="help-block">
Your comment is required.
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="commentForm.$invalid">Send Comment</button>
</div>
</div>
</form>
</body>
</html>
Related
I want to show multiple div if radio button is checked. Here is the code that I tried.
HTML:
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
<label class="form-check-label" for="yes"> Yes </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="radio" type="radio" id="no" value="no">
<label class="form-check-label" for="no"> No </label>
</div>
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
CSS:
.show{
display:none ;
}
input#yes:checked ~ div.show{
display: block;
}
If 'YES' button is checked then 'SHOW' class div will show. If I put the 'SHOW' class div with the input field it works. But when I put it outside of the input field div it doesn't work.
Can anyone please help me with my code structure.
Please see the image for better understanding.
my code
The css solution will indeed only work if those 'show' divs are inside the same parent as the radio buttons. If you want them to be outside that input field div, then use a bit of javascript.
document.querySelector('input#yes').addEventListener('click', function() {
Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
group.style.display = "block";
})
})
document.querySelector('input#no').addEventListener('click', function() {
Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
group.style.display = "none";
})
})
.form-group.show {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
<label class="form-check-label" for="yes"> Yes </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="radio" type="radio" id="no" value="no">
<label class="form-check-label" for="no"> No </label>
</div>
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Number</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Address</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Here is my Angular2 Form
<form [formGroup]="myForm" autocomplete="off" novalidate> <div
class="row"> <div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.firstname.invalid &&
myForm.controls.firstname.touched}">
<label for="firstname">Please tell us your name</label>
<control-messages [control]="myForm.controls.firstname"></control-messages>
<input name="firstname" formControlName="firstname" type="text"
class="form-control" placeholder="First Name *" /> </div> <div
class="form-group col-md-4" >
<label for="middlename"> </label>
<control-messages [control]="myForm.controls.middlename"></control-messages>
<input name="middlename" id="middlename" type="text" class="form-control"
placeholder="Middle Name" formControlName="middlename"/> </div>
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.lastname.invalid && myForm.controls.lastname.touched
}">
<label for="lastname"> </label>
<control-messages [control]="myForm.controls.lastname"></control-messages>
<input name="lastname" formControlName="lastname" type="text" class="form-
control" placeholder="Last Name *"/> </div> </div>
</form>
enter image description here
How do I line up all the columns correctly? Please help.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form [formGroup]="myForm" autocomplete="off" novalidate>
<div class="row">
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.firstname.invalid &&
myForm.controls.firstname.touched}">
<label for="firstname">Please tell us your name</label>
<control-messages [control]="myForm.controls.firstname"></control-messages>
<input name="firstname" formControlName="firstname" type="text" class="form-control" placeholder="First Name *" />
</div>
<div class="form-group col-md-4">
<label for="middlename"> </label>
<control-messages [control]="myForm.controls.middlename"></control-messages>
<input name="middlename" id="middlename" type="text" class="form-control" placeholder="Middle Name" formControlName="middlename" />
</div>
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.lastname.invalid && myForm.controls.lastname.touched
}">
<label for="lastname"> </label>
<control-messages [control]="myForm.controls.lastname"></control-messages>
<input name="lastname" formControlName="lastname" type="text" class="form-control" placeholder="Last Name *" />
</div>
</div>
</form>
You had some line breaks in between form-control for the last name input field, try like this:
<form [formGroup]="myForm" autocomplete="off" novalidate>
<div class="row">
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.firstname.invalid &&
myForm.controls.firstname.touched}">
<label for="firstname">Please tell us your name</label>
<control-messages [control]="myForm.controls.firstname"></control-messages>
<input name="firstname" formControlName="firstname" type="text"
class="form-control" placeholder="First Name *" />
</div>
<div class="form-group col-md-4" >
<label for="middlename"> </label>
<control-messages [control]="myForm.controls.middlename"></control-messages>
<input name="middlename" id="middlename" type="text" class="form-control"
placeholder="Middle Name" formControlName="middlename"/>
</div>
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.lastname.invalid && myForm.controls.lastname.touched
}">
<label for="lastname"> </label>
<control-messages [control]="myForm.controls.lastname"></control-messages>
<input name="lastname" formControlName="lastname" type="text" class="form-control" placeholder="Last Name *"/>
</div>
</div>
</form>
I've made 5 rows using bootstrap, they got placed neatly, but there is a small issue. The rows are getting in contact without leaving any gap. I should not use , this will bring a big gap, and the textboxes in each row should be vertically align, if there is no radio button in that row, that corresponding place should be kept empty and textbox should get aligned properly with all rows. The starting textbox in all rows should start at the same place where the first row textbox has started. Here is my code
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>
Please check in browser not in fiddle because it changes alignments .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;" >
<label><input type="radio" name="optradio" style="vertical-align:middle;"> Option
1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;" >
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-1">
<div class="form-inline form-group">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-1">
<div class="form-inline form-group">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>
Here is JSFIDDLE
In my form I have two cols with the label on top and a full width input. My problem is that I now have two fields requiring radios. I want to split the col into 2 and have the two labels with their two radios below. I can get that ok but the alignment is then not right on the next field down.
You can see it here in this bootply http://www.bootply.com/VlFHq0daui
Leased property and mesne rate units. The key codes below it is not aligning correctly.
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="address_line1" class="control-label">Address 1</label>
<input type="text" class="form-control" id="address_line1">
</div>
<div class="form-group">
<label for="address_line1" class="control-label">Address 2</label>
<input type="text" class="form-control" id="address_line2">
</div>
<div class="form-group">
<label for="town" class="control-label">Town*</label>
<input type="text" class="form-control" id="town">
</div>
<div class="form-group">
<label for="county" class="control-label">County</label>
<input type="text" class="form-control" id="county">
</div>
<div class="form-group">
<label for="eircode" class="control-label">Eircode</label>
<input type="text" class="form-control" id="eircode">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="reference" class="control-label">Reference</label>
<input type="text" class="form-control" id="reference">
</div>
<div class="form-group">
<label for="tax_reference" class="control-label">Tax Reference</label>
<input type="text" class="form-control" id="tax_reference">
</div>
<div class="form-group">
<label for="local_authority" class="control-label">Local Authority</label>
<select name="local_authority" id="local_authority" class="form-control">
<option>Select...</option>
<option value="41">Ahtlone Town Council</option>
<option value="88">Youghal Town Council</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<label for="leased_property" class="control-label">Leased Property?</label>
<br>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
<div class="col-lg-6">
<label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label>
<br>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="key_code" class="control-label">Key Code</label>
<input type="text" class="form-control" id="key_code">
</div>
<div class="form-group">
<label for="gprn_number" class="control-label">GPRN Number</label>
<input type="text" class="form-control" id="gprn_number">
</div>
<div class="form-group">
<label for="mprn_number" class="control-label">MPRN Number</label>
<input type="text" class="form-control" id="mprn_number">
</div>
</div>
</div>
</form>
You can warp radios inputs inside a div with same height of input box:
<div class="radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.radios{
height: 34px;
padding: 5px;
}
Bootply
Add this to your CSS.
.form-group {
min-height:59px;
}
After some trying I found a solution, its not perfect, but will solve the issue.
You could wrap your radio elements into a row and hardcode the needed margins to align the buttons the way you want. For this I gave the row a custom class align-radios.
HTML:
<div class="row align-radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.align-radios {
margin: 7px 0 7px 5px;
}
Hope this helps you a bit.
I have the following markup
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>
which results in
How can I have it aligned like the password?
Try like this: Demo
If you use form-group along with input-group like you did for password, you can get your expected output.
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name"
aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
Here your answer jsFiddle:
<form role="form">
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>