I have this plunk file. In my code, I want to create 4 radio buttons but i dont know why all the radio buttons are checked when it is meant to be only one radio button checked.
http://plnkr.co/edit/IbtUGzuATbcSCmoDMH73
<div class="row">
<label class="col-sm-3">Choose Service Category:</label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Adhoc</label>
<br/>
<span>(One Time Service)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Semi-monthly</label>
<br/>
<span>(Every 2 Weeks)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Monthly</label>
<br/>
<span>(Once a Month)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Weekly</label>
<br/>
<span>(Once a Week)</span>
</div>
</div>
</div>
They lack a "name" attribute. To make radio buttons work together, they need to have the same "name" HTML attribute:
<div class="row">
<label class="col-sm-3">Choose Service Category:</label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Adhoc</label>
<br/>
<span>(One Time Service)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Semi-monthly</label>
<br/>
<span>(Every 2 Weeks)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Monthly</label>
<br/>
<span>(Once a Month)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Weekly</label>
<br/>
<span>(Once a Week)</span>
</div>
</div>
</div>
Related
I'm trying to make a checklist in a more time saving way.
I have to do this thing underneath for every page like 17 times.
So to save some time I was hoping for Emmet to be te solution.
Important to say, I want to select the three names and do everything at once. I work with Coda 2.
What's the abbreviation to produce the following code after selecting the lines below:
Video
DVD
CD
To produce:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item1" value="Done" /> Video
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item2" value="Done" /> DVD
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item3" value="Done" /> CD
</label>
</div>
</div>
</div> <!-- form-group -->
And why doesn't this work: (div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
When I try this I get:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item1" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item2" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item3" value="done">Video
DVD
CD</label></div>
</div>
</div>
Okay I came A little bit further.
Now it works with multiple lines.
But de Video, CD, DVD stay with the last form-group.
I used this one again:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
My result:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list1">
<input type="checkbox" name="item1" value="Gedaan" id="list1"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list2">
<input type="checkbox" name="item2" value="Gedaan" id="list2"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list3">
<input type="checkbox" name="item3" value="Gedaan" id="list3"/>Video
DVD
CD
</label>
</div>
</div>
</div>
This worked for me:
(.form-group>.col-sm-12>.checkbox>label>input[type=checkbox][name="item$"][value="done"])*
And the generated HTML:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item1" value="done">Video
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item2" value="done">CD
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item3" value="done">DVD
</label>
</div>
</div>
</div>
I tried yours and it works too, except for the part value=Gedaan:
Found the answer:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$]){}*
{} lets the txt go on the back
How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>
I was gold-plating the signup page by adding labels above each field when suddenly:
It worked fine but not with radio buttons. I'm relying on Bootstrap 3 and I think this can be solved without extra CSS but just with right nesting of Bootstrap classes. Right?
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label for="input-password">Password:</label>
<input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
</div>
<div class="col-sm-3">
<label for="input-confirm-password">Confirm Password:</label>
<input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="input-address">Address:</label>
<input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
</div>
</div>
<label class="row">Gender:</label>
<div class="form-group">
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-male" value="Male" type="radio" />Male
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-female" value="Female" type="radio" />Female
</label>
</div>
</div>
<div class="form-group">
<label>Account Type:</label>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div>
</form>
I tried 2 different placement of the elements to resolve this issue as you can see but it didn't work.
I even tried putting a div around each set of the radio buttons and then gave a label for it but that didn't work either.
You can do it this way:
<div class="form-group">
<div class="col-sm-6">
<label for="input-type">Account Type *:</label>
<div id="input-type" class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div
</div>
</div>
Do the same for the other radio buttons group.
Explanation: The col-sm-6 of the outer div is now 100% and can be divided 50:50 by col-sm-6 and col-sm-6
After clicking on a radio button if i click on other radio button the checked value is not getting deselected , where am i going wrong ?
I have added a fiddle here http://jsfiddle.net/Lv8xzkhs/
<fieldset>
<legend>Property Info</legend>
<div class="row">
<div class="col-md-3 col-xs-12">
<label>I want To:</label>
<div class="radio">
<label><input class="radio-inline" type="radio" >Sale</label>
<label><input class="radio-inline" type="radio" >Rent Out</label>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label for="sel1">Looking For:</label>
<select class="form-control" id="sel1">
<option>PentHouse</option>
<option>Villa</option>
<option>Plot</option>
<option>Studio</option>
</select>
</div>
<div class="col-md-3 col-xs-12">
<label>Location:</label>
<input type="text" class="form-control">
</div>
</div>
</fieldset>
Add name attribute to your radio btn
<label><input class="radio-inline" type="radio" name="yourgroup">Sale</label>
<label><input class="radio-inline" type="radio" name="yourgroup">Rent Out</label>
Fiddle: http://jsfiddle.net/Lv8xzkhs/1/
More info : http://www.w3.org/TR/html-markup/input.radio.html
Wide space between label for vertical radio button and first choice. In an ideal world, I would love it to be the same amount of space as between the field labels and the top line on the fields. Any thoughts or ideas? Thanks in advance.
http://jsfiddle.net/steveadams617/MgcDU/8543/
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class='form-group'>
<label for="provider_id">Provider</label>
<div>
<input class="form-control" type="text" maxlength="255" value="" name="provider_id_auto" id="provider_id_auto"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<label for='phone_us'>Phone</label>
<input class='form-control phone_us' type='text' maxlength='14' value='' name='phone_us' id='phone_us'/>
</div>
</div>
</div><!-- .row -->
<div class='row'>
<div class="col-sm-6">
<label for="med_coverage_id">Insurance Coverage</label>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="1" checked />
Pending
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="2" />
Covered
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="3" />
Needs Prior Approval
</label>
</div>
</div>
</div><!-- .row -->
</form>
</div><!-- .container -->
Your div .radio has a margin-top of 10px. You can manually adjust this like so
<div class="radio" style="margin-top: 0px;">
<label>
<input type="radio" name="med_coverage_id" value="1" checked="">Pending </label>
</div>
or of course edit the stylesheet or add your own style to the .radio-class (eg if you are using a CDN).