HTML code
<div id=checkbox>
<div id=groupfour>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Jan" id="EJan">
<label>Jan </label>
</div>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Feb" id="EFeb">
<label>Feb</label>
</div>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Mar" id="EMar">
<label>Mar</label>
</div>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Apr" id="EApr">
<label>Apr</label>
</div>
</div>
<div id=groupfour>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="May" id="EMay">
<label>May</label>
</div>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Jun" id="EJun">
<label>Jun</label>
</div>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Jul" id="EJul">
<label>Jul </label>
</div>
<div id=groupone>
<input type="checkbox" checked="checked" name="Mapmashup" value="Aug" id="EAug">
<label>Aug</label>
</div>
</div>
CSS Code
#groupfour
{
position:relative;
vertical-align: bottom;
}
I want to group my checkboxes of months in group of four in three rows . This way its coming in a vertical list of months .If I remove internal div checkboxes are not alligned in all three rows .
Check this JSBIN
Its very very basic way to make this
Used to white-space:nowrap and display:inline-block;
as like this
#groupfour{
white-space:nowrap;
}
#groupfour #groupone{
display:inline-block;
}
Demo
Demo-2
You can achieved that using css
<style>
.groupone{
float: left;
}
.groupfour{
clear: left;
}
</style>
Also, since you are calling same div at the same time, change all 'id' to 'class'
<div class="groupfour">
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Jan" class="EJan">
<label>Jan </label>
</div>
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Feb" class="EFeb">
<label>Feb</label>
</div>
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Mar" class="EMar">
<label>Mar</label>
</div>
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Apr" class="EApr">
<label>Apr</label>
</div>
</div>
<div class="groupfour">
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="May" class="EMay">
<label>May</label>
</div>
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Jun" class="EJun">
<label>Jun</label>
</div>
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Jul" class="EJul">
<label>Jul </label>
</div>
<div class="groupone">
<input type="checkbox" checked="checked" name="Mapmashup" value="Aug" class="EAug">
<label>Aug</label>
</div>
</div>
Related
I want to change the color of the answer when player click to answer box (to choose it) like the picture below.
Here is my html code, the radio box is a child of label. I tried some commands such as:
.choices > input[type="radio"]:checked {background: yellow;}
but seemingly it's not true. And someone please tell me the differences when I put unchecked="checked" into the radio-box line?
Thank all of you so much!
<!-- ---question1--- -->
<div class="quest">
<h1>Question 1 of 10</h1>
<h5>Question 1</h5>
<div class="group">
<label for="opt1" class="choices">
<input type="radio" id="1" name="q1" value="o1" >Option 1<br>
</label>
<label for="opt2" class="choices">
<input type="radio" id="2" name="q1" value="o2" >Option 2<br>
</label>
<label for="opt3" class="choices">
<input type="radio" id="3" name="q1" value="o3" >Option 3<br>
</label>
<label for="opt4" class="choices">
<input type="radio" id="4" name="q1" value="o4" >Option 4<br>
</label>
</div>
</div>
<!-- ---question2--- -->
<div class="quest">
<h1>Question 2 of 10</h1>
<h5>Question 2</h5>
<div class="group">
<label for="opt1" class="choices">
<input type="radio" id="5" name="q2" value="o1" unchecked="checked">Option 1<br>
</label>
<label for="opt2" class="choices">
<input type="radio" id="6" name="q2" value="o2" unchecked="checked">Option 2<br>
</label>
<label for="opt3" class="choices">
<input type="radio" id="7" name="q2" value="o3" unchecked="checked">Option 3<br>
</label>
<label for="opt4" class="choices">
<input type="radio" id="8" name="q2" value="o4" unchecked="checked">Option 4<br>
</label>
</div>
</div>
Some have already pointed out that checked + label is a possible solution. Here is the example, but somewhat shortened.
input[type="radio"]:checked + label {
background: yellow;
}
<!-- ---question1--- -->
<div class="quest">
<h1>Question 1 of 10</h1>
<h5>Question 1</h5>
<div class="group">
<div>
<input type="radio" id="1" name="q1" value="o1">
<label for="1"> Option 1 </label>
</div>
<div>
<input type="radio" id="2" name="q1" value="o2">
<label for="2"> Option 2</label>
</div>
</div>
</div>
It's a bit tricky with CSS only but not impossible. I changed a bit the HTML structure but IT WORKS.
The unchecked attribute doesn't exist, you should only use <input type="radio" id="opt1" name="q1" value="o1"> and add checked for the selected state like in the example below.
.choices {
position: relative;
}
.choices > input[type="radio"] {
position: absolute;
left: 4px;
top: 4px;
}
.choices label {
padding: 4px 32px;
display: block;
}
.choices > input[type="radio"]:checked + label {
background: yellow;
}
<div class="quest">
<h1>Question 1 of 10</h1>
<h5>Question 1</h5>
<div class="group">
<div class="choices">
<input type="radio" id="opt1" name="q1" value="o1">
<label for="opt1">Option 1</label>
</div>
<div class="choices">
<input type="radio" id="opt2" name="q1" value="o2">
<label for="opt2">Option 2</label>
</div>
<div class="choices">
<input type="radio" id="opt3" name="q1" value="o3" checked>
<label for="opt3">Option 3</label>
</div>
<div class="choices">
<input type="radio" id="opt4" name="q1" value="o4">
<label for="opt4">Option 4</label>
</div>
</div>
</div>
There are some issues in your code:
The for attribute of the label should be the same as the corresponding input's id
<div>
<input type="radio" id="5" name="q1" value="o1">
<label for="5"> Option 1 </label>
</div>
There's NO unchecked attribute in HTML for radio!
We only have checked attribute. See MDN Docs and this question for more info.
Styling
Since you cannot select the parent element in CSS, you can your write code in the format I mentioned above and style the label of the input.
input[type="radio"]:checked + label {
background: yellow;
}
Otherwise, you need to use js: if checkbox checked add class to parent element
You Can handle it in JScript, If you go to CSS documentation the css code might not work on old browsers:
var elements = document.getElementsByClassName("answer");
for (var i = 0; i < elements.length; i++) {
var element1 = elements[i];
element1.addEventListener('click', function(element1){
this.firstElementChild.className="selected"
}, false);
element1.addEventListener('focusout', function(element1){
this.firstElementChild.className="area";
this.firstElementChild.firstElementChild.checked=false;
}, false);
}
.answer{margin-top:30px;}
.selected{background:yellow;padding:10px;}
.area{
background:red;
padding:10px;
}
.area:active{background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="Question_box">
1. Question is to pick one.
</div>
</br>
<div class="answer">
<label class="area">
<input type="radio" name="data" id="1" class="radio"/> Option 1
</label>
</div>
<div class="answer">
<label class="area">
<input type="radio" name="data" id="2" class="radio"/> Option 2
</label>
</div>
<div class="answer">
<label class="area">
<input type="radio" name="data" id="3" class="radio"/> Option 3
</label>
</div>
<div class="answer">
<label class="area">
<input type="radio" name="data"id="4" class="radio"/> Option 4
</label>
</div>
</div>
</body>
</html>
you need to change your mark up and little bit CSS.
main css will be
input[type="radio"]:checked+.choices {background: yellow;}
instated of this
<label for="opt1" class="choices">
<input type="radio" id="5" name="q2" value="o1" unchecked="checked">Option 1<br>
</label>
you need to write like this for all inputs,
<input type="radio" id="5" name="q2" value="o1" unchecked="checked">
<label for="opt1" class="choices">Option 1</label>
l don't know your second question but I think there is nothing to think about it.
I'm using bootstrap to create the following form. It works fine in a browser, but when I shrink it down, the boxes and labels stack on top of each other. Is there an easy fix for this in bootstrap so the labels and checkboxes stay in line even on mobile screens?
https://www.bootply.com/quVvJ0pLNo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="test" class="col-sm-5 control-label">mytest</label>
<div class="col-sm-7 text-center">
<div class="row">
<div class="col-sm-1">Mon</div>
<div class="col-sm-1">Tue</div>
<div class="col-sm-1">Wed</div>
<div class="col-sm-1">Thu</div>
<div class="col-sm-1">Fri</div>
<div class="col-sm-1">Sat</div>
<div class="col-sm-1">Sun</div>
</div>
<div class="row checkbox text-center">
<div class="col-sm-1 ">
<label>
<input type="checkbox" name="test" id="test2" value="1" aria-label="1">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="2" aria-label="2">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="3" aria-label="3">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="4" aria-label="4">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="5" aria-label="5">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="6" aria-label="6">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="7" aria-label="7">
</label>
</div>
</div>
</div>
</div>
Try using checkbox with label text and used col-xs-1 instead of col-sm-1 for same output in mobile screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="test" class="col-sm-5 control-label">mytest</label>
<div class="col-sm-7 text-center">
<div class="row">
<div class="col-xs-1">
<label>
Mon<br/>
<input type="checkbox" name="test" id="test1" value="1" aria-label="1">
</label>
</div>
<div class="col-xs-1">
<label>
Tue <br/>
<input type="checkbox" name="test" id="test2" value="2" aria-label="2">
</label>
</div>
<div class="col-xs-1">
<label>
Wed <br/>
<input type="checkbox" name="test" id="test3" value="3" aria-label="3">
</label>
</div>
<div class="col-xs-1">
<label>
Thu <br/>
<input type="checkbox" name="test" id="test2" value="4" aria-label="4">
</label>
</div>
<div class="col-xs-1">
<label>
Fri <br/>
<input type="checkbox" name="test" id="test5" value="5" aria-label="5">
</label>
</div>
<div class="col-xs-1">
<label>
Sat <br/>
<input type="checkbox" name="test" id="test6" value="6" aria-label="6">
</label>
</div>
<div class="col-xs-1">
<label>
Sun <br/>
<input type="checkbox" name="test" id="test7" value="7" aria-label="7">
</label>
</div>
</div>
</div>
</div>
You can overwrite the default bootstrap css:
.form-group .row [class*="col-"] {
float: left;
width: 8.33333333%;
}
I have a form which have a field of type EntityType named categories that is showing like this :
each one is placed in the bottom of the other, i want them to be displayed by group of 2 like this :
anyone have an idea how to do that with Symfony and Twig ?
EDIT :
here is the html code produced by the twig engine for that field
<form name="form" method="post">
<button type="submit" name="rechercher" class="btn btn-success">Rechercher</button>
<div id="form">
<div class="form-group">
<label class="control-label" for="form_motcle">Mot Clé</label>
<input type="text" id="form_motcle" name="form[motcle]" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Categories</label>
<div id="form_categories">
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_1" name="form[categories][]" value="1" /> Théatre (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_2" name="form[categories][]" value="2" /> Cinema (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_3" name="form[categories][]" value="3" /> Comédie (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_4" name="form[categories][]" value="4" /> Spectacle (0)
</label>
</div>
</div>
</div>
</div>
</form>
You can solve this with a little CSS already. For information and usage of flexbox I always suggest this article.
What this code does is basically the following:
Define #form_categories as somewhat of a container. Elements inside should be placed from left to right (row) and if they reach the end, should use a new line (wrap).
Each div which holds a checkbox (#form_categories > .checkbox) has a width of 50%, so you will have 2 divs per "row".
The advantage of an approach like this is that you can use media queries and change width: 100%; of a single div so it has its own row (e.g. on mobile displays).
#form_categories {
display: flex;
flex-flow: row wrap;
width: 100%;
}
#form_categories > .checkbox {
width: 50%;
}
<div id="form_categories">
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_1" name="form[categories][]" value="1" /> Théatre (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_2" name="form[categories][]" value="2" /> Cinema (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_3" name="form[categories][]" value="3" /> Comédie (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_4" name="form[categories][]" value="4" /> Spectacle (0)
</label>
</div>
</div>
I want to set up checkboxes side-by-side to visually represent something. It looks fine on my site but falls apart when trying to resize or on an iPad. I'm probably making a silly mistake but I would appreciate any corrections to my code.
http://www.bootply.com/1a5yzjMAGp
<div class="col-md-6">
<div class="col md-6">
<div class="checkbox checkbox-primary">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox1">
Art
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox2">
Drama
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox3">
Foods and Nutrition
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox4">
Geography
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox5">
Industrial Arts/Shop Programs
</label>
</div>
</div>
</div>
<div class="col md-6">
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Math
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Music
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" checked="checked" />
<label for="checkbox6">
Technology
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Science
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox" disabled="disabled" />
<label for="checkbox6">
Physical Education/Health
</label>
</div>
</div>
You can try giving the div with class checkbox the following properties:
.checkbox {
width:250px;
float:left;
}
You can play around with width to make it fit to you needs.
Here's the fiddle: JSBIN
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).