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
Related
I have made 2 questions in a form using Bootstrap. The first question has 4 options and the second question has 4 options. When I check one of the options from the first question and then if I check one of the options from the second question then the radio button checked in the first question becomes unchecked. Why are the checkboxes dependent on two different questions?
index.html:
<form>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<h3>[Test]Contact us Survey Form</h3>
</div>
</div>
<div id="agegroup">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<h4>What is your age group?</h4>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> >=25 yrs</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> 26-35 yrs</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> 36-50 yrs</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> >50 yrs</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<h4>What is your gender?</h4>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> Female</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> Male</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> Prefer not to say</label>
</div>
</div>
</div>
</form>
Screenshot:
You need to give each group a different name.
So, if you use name="optradio" for the first group, give the second group something like name="optradio2".
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 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>
I am trying to get my check boxes and labels to align correctly when I use the Bootstrap grid. It seems to be perfectly fine until I had a label after my check boxes.
Here is what it looks like in Firefox:
This is my code:
<div id="view2">
<div class="container-fluid center">
<div class="row">
<div class="col-xs-3">
<label for="daysAvailable">Days Available</label>
</div>
<div class="col-xs-3">
<label for="employmentDesired">Employment Desired</label>
</div>
<div class="col-xs-3">
<label for="hoursWeekly">Hours Available Per Week</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="allDays" />
<label for="allDays">All</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="monday" />
<label for="monday">Mon</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="tuesday" />
<label for="tuesday">Tue</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="fullTime" />
<label for="fullTime">FullTime</label>
</div>
<div class="col-xs-3">
<input type="text" id="hoursPerWeek" />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="wednesday"/>
<label for="wednesday">Wed</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="thursday"/>
<label for="thursday">Thu</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="friday"/>
<label for="friday">Fri</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="partTime" />
<label for="partTime">PartTime</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="saturday"/>
<label for="saturday">Sat</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="sunday"/>
<label for="sunday">Sun</label>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-3">
<label for="workNight">Can You Work Nights</label>
</div>
<div class="col-xs-3">
<label for="beenFired">Have You Been Fired Before</label>
</div>
<div class="col-xs-3">
<label for="dateAvailable">Date Available</label>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightYes" />
<label for="workNightYes">Yes</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="yesFired"/>
<label for="yesFired">Yes</label>
</div>
<div class="col-xs-3">
<input type="text" id="datepicker" />
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightNo" />
<label for="workNightNo">No</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="noFired" />
<label for="noFired">No</label>
</div>
</div>
</div>
</div>
use the bootstrap checkbox class
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
enter image description hereI have a grid created using class col-md-3 which have 3 columns:
<div ng-repeat='(key, value) in permissionsViewContent' class="row">
<div class="tree_content_permissions_title">
<span> {{key}}</span>
</div>
<div ng-repeat="val in value"
class="col-md-3 tree_content_permissions">
<label class="checkbox"> <input type="checkbox">
{{val}}
</label>
</div>
</div>
this grid created from a list of values. I want my grid to have border line after each row in my grid. How can I do it using css?
Thanks,
Simply you can use <hr/> tags where you want
You can use like this:
DEMO
<div class="row">
<div class="tree_content_permissions_title">
<span>asd</span>
</div>
<div class="row">
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" value="sadfdsf" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" value="sadfdsf" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
<div class="col-md-3 tree_content_permissions">
<label class="checkbox">
<input type="checkbox" />
sdfsdf
</label>
</div>
</div>
<hr />
</div>
What about adding this then DEMO
<div ng-repeat='(key, value) in permissionsViewContent'>
<div class="row">
<div class="tree_content_permissions_title">
<span> {{key}}</span>
</div>
<div ng-repeat="val in value"
class="col-md-3 tree_content_permissions">
<label class="checkbox"> <input type="checkbox">
{{val}}
</label>
</div>
</div>
<hr>
</div>