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
Related
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 have the following HTML:
<div class="col-sm-6" style="border: 1px solid #ddd; border-radius: 15px;">
<div style="margin: 8px 0 8px 5px;">
<h3>Constitutional</h3>
<div class="row">
<div class="col-sm-6">
<label class="radio-inline">Group 1.1:</label>
<div class="radio radio-info radio-inline">
<input id="ros-wch-na" type="radio" name="ros-wch" value="na" checked />
<label for="ros-wch-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-wch-y" type="radio" name="ros-wch" value="y" />
<label for="ros-wch-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-wch-n" type="radio" name="ros-wch" value="n" />
<label for="ros-wch-n">No</label>
</div>
</div>
<div class="col-sm-6">
<label class="radio-inline">Group 1.2:</label>
<div class="radio radio-info radio-inline">
<input id="ros-an-na" type="radio" name="ros-an" value="na" checked />
<label for="ros-an-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-y" type="radio" name="ros-an" value="y" />
<label for="ros-an-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-n" type="radio" name="ros-an" value="n" />
<label for="ros-an-n">No</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="radio-inline">Row2 Group1:</label>
<div class="radio radio-info radio-inline">
<input id="ros-ns-na" type="radio" name="ros-ns" value="na" checked />
<label for="ros-ns-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-ns-y" type="radio" name="ros-ns" value="y" />
<label for="ros-ns-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-ns-n" type="radio" name="ros-ns" value="n" />
<label for="ros-ns-n">No</label>
</div>
</div>
<div class="col-sm-6">
<label class="radio-inline">Row2 Group2:</label>
<div class="radio radio-info radio-inline">
<input id="ros-hc-na" type="radio" name="ros-hc" value="na" checked />
<label for="ros-hc-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-hc-an" type="radio" name="ros-hc" value="y" />
<label for="ros-hc-an">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-hc-an" type="radio" name="ros-hc" value="n" />
<label for="ros-hc-n">No</label>
</div>
</div>
</div>
</div>
</div>
I'm using awesome-bootstrap-checkbox for the radio buttons, so that's why the markup is a bit different and what the radio-* classes are for.
The goal here is to have them all line up vertically and horizontally. Horizontally is not a problem, that works fine. However, labels of different lengths cause the radio button groups to shift, and it becomes uneven, as shown here. The desired effect is to have the radio groups align vertically and look even.
What would the proper CSS/HTML be so that the groups align both horizontally and vertically, no matter the label?
Divide the Label part and Radio-boxes part into two. Have labels with fixed width and wrap the long labels.
<div class="col-sm-6">
<div class='labelsDiv'>
<label class="radio-inline">Group 1.2:</label>
</div>
<div class='radiosDiv'>
<div class="radio radio-info radio-inline">
<input id="ros-an-na" type="radio" name="ros-an" value="na" checked />
<label for="ros-an-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-y" type="radio" name="ros-an" value="y" />
<label for="ros-an-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-n" type="radio" name="ros-an" value="n" />
<label for="ros-an-n">No</label>
</div>
</div>
</div>
When you read this... I probably still haven't solved my issue,
I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.
Output: http://prntscr.com/5am898
My Code:
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<label class="radio-inline" for="gal2015lbl">
<input name="galTab" id="gal2015" value="2015" type="radio">2015
</label>
<label class="radio-inline" for="gal2014lbl">
<input name="galTab" id="gal2014" value="2014" type="radio">2014
</label>
<label class="radio-inline" for="gal2013lbl">
<input name="galTab" id="gal2013" value="2013" type="radio">2013
</label>
<label class="radio-inline" for="gal2012lbl">
<input name="galTab" id="gal2012" value="2012" type="radio">2012
</label>
<label class="radio-inline" for="galOtherlbl">
<input name="galTab" id="galOther" value="Anders" type="radio">And
</label>
</div>
</div>
</div>
Try placing the input outside the label.
<label class="radio-inline" for="galOtherlbl">
And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">
put the label in label tag like
<label class="radio inline control-label">Some label</label>
try
FIDDLE DEMO
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<input name="galTab" id="gal2015" value="2015" type="radio">
<label class="radio-inline" for="gal2015lbl">2015</label>
<input name="galTab" id="gal2014" value="2014" type="radio">
<label class="radio-inline" for="gal2014lbl">2014</label>
<input name="galTab" id="gal2013" value="2013" type="radio">
<label class="radio-inline" for="gal2013lbl">2013</label>
<input name="galTab" id="gal2012" value="2012" type="radio" />
<label class="radio-inline" for="gal2012lbl">2012</label>
<input name="galTab" id="galOther" value="Anders" type="radio"/>
<label class="radio-inline" for="galOtherlbl">And</label>
</div>
</div>
</div>
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>