I'm trying to achieve the picture above on the Target Time section....
All I have is as below... But the placement is not right when I resize my browser, and I don't know how to add the peak time picture above the checkboxes. Anyone can help ?
<div class="row-fluid">
<label style="float:left; margin-right:14px;">Target Time</label>
<div style="float:left; display:block;">
<label class="checkbox inline">
<input type="checkbox" value="7am-11:59am" name="target_time[]" />7am-11:59am</label>
<label class="checkbox inline">
<input type="checkbox" value="12pm-5:59pm" name="target_time[]" />12pm-5:59pm</label>
<label class="checkbox inline">
<input type="checkbox" value="6pm-9:59pm" name="target_time[]" />6pm-9:59pm</label>
</div>
<div style="position:relative; display:block;">
<div style="float: left; border-right: 1px solid #aaa; height: 5em;"></div>
<label class="checkbox inline">
<input type="checkbox" value="10:00pm-2:00am" name="target_time[]" />10:00pm-2:00am</label>
<label class="checkbox inline">
<input type="checkbox" value="2:01am-6:59am" name="target_time[]" />2:01am-6:59am</label>
</div>
</div>
Jsfiddle DEMO: http://jsfiddle.net/a8VpS/1/
Do you want this kind of structure.if yes then check the following structure for you check boxes
<div style="float:left;">
<img src='http://forums.animesuki.com/images/as.global/icons/icon7.gif'><br>
<label class="checkbox inline">
<input type="checkbox" value="7am-11:59am" name="target_time[]"/>7am-11:59am
</label>
</div>
Fiddle Demo
Is this what you expect -->
Check The updated Fiddle Demo
Related
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>
Below is a HTML Code but the display:inline isn't working. Am not able to understand why. But display:flex, display: -webkit-box;, display: -webkit-inline-box; , display: inline-flex; are working fine;
When i use display:inline on class position
When i use display:flex or display: -webkit-box; or display: -webkit-inline-box; or display: inline-flex; on class position
Below are the HTML Code:
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1
</label><br/>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>
</div>
</div>
</div>
Can somebody help me figure out why i cant use display:inline. Thanks.
Try this...
Remove the <br /> tag from your code.
.radio-style {
margin-right: 15px;
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div class="radio-style">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
</label>
</div>
<div class="radio-style">
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2">Type 2
</label>
</div>
</div>
</div>
Also, Simply you can place the two radios into the same div. You don't need any extra css. :)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div>
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
</label>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2">Type 2
</label>
</div>
</div>
</div>
Try it like this,
HTML
<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
<div style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>
</div>
</div>
</div>
CSS
.radio-inline{
float:left;
display:inline;
}
I have two rows of checkboxes and labels.Although horizontal alignment is not an issue , however there is a problem of vertical alignment of second column.How can I achieve a symmetry in this case?
<div class="form-inline">
<div class="form-group">
<div class="col-md-4">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>
<div class="col-md-4">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
</div>
</div>
JSfiddle
As you can see the alignment of Moday and Friday (checkbox and label) is not proper.
I've updated your fiddle with a fixed width on the wrapping div .col-md-4 and positioned the labels using float with the width of each label set to take 1/3 of the parents width using the calc function:
label{
float: left;
width: calc(100%/3)
}
What if you wrap each checkbox with a col-sm-3 box?
<div class="col-sm-3">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>
https://jsfiddle.net/hobs766o/1/
JsFiddle DEMO
.col-md-4.first label {
display: block;
width: 99px;
float: left;
}
.col-md-4.second label {
display: block;
width: 99px;
float: left;
}
<div class="form-inline">
<div class="form-group">
<div class="col-md-4 first">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>
<div style="clear:left"></div>
<div class="col-md-4 second" style="
">
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
<label class="radio-inline">
<input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
</div>
</div>
</div>
<div class="form-group">
<label for="property_feature" class="col-md-4 col-sm-4 control-label">ফিচার</label>
<div class="col-md-8 col-sm-8 col-md-offset-4">
<label class="checkbox-inline">
<input type="checkbox" value="1" id="property_furnished" name="feature">আসবাবপত্রে সজ্জিত
</label>
<label class="checkbox-inline">
<input type="checkbox" value="2" id="property_sublet" name="feature">সাবলেট
</label>
<label class="checkbox-inline">
<input type="checkbox" value="3" id="property_mess" name="feature">মেস
</label>
</div>
</div>
The above code gives me following output. But I want everything to be displayed as inline. How can I do this?
A more bootstrap focused approach would to be to restructure your code like such:
<form class="form-inline">
<div class="col-md-8 col-sm-8 col-md-offset-4">
<div class="form-group">
<label for="property_feature">ফিচার</label>
</div>
<div class="form-group">
<label for="property_furnished">আসবাবপত্রে সজ্জিত</label>
<input value="1" id="property_furnished" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_sublet">সাবলেট</label>
<input value="2" id="property_sublet" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_mess">মেস </label>
<input value="3" id="property_mess" name="feature" type="checkbox">
</div>
</div>
</form>
One of the main issues in your code is that your first label is OUTSIDE of your div class that sets the column position. So you aren't including it in the col-md-offset-4 that you specify.
Here's a bootply http://www.bootply.com/ekh1Cpmeht
You will most likely want to adjust the spacing between the property_feature label and the property_furnished .
Use display: inline-block; because Div will break down to new line the checkbox.
.col-md-8.col-sm-8.col-md-offset-4 {
display: inline-block;
}
.col-md-4.col-sm-4.control-label {
display: inline-block;
}
Check Fiddle.
Is there anyway to get the text of a checkbox to be on the left side of the checkbox? I have tried and tried but cant get it working.
I'm using
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox style-2 " checked="checked">
<span>Text goes here</span>
</label>
</div>
I have tried putting the span on top and that also doesn't work, Then if I make it a blank checkbox and just put text in front then they don't line up.
any help would be really appreciated.
Bootstrap styling will float the checkbox elements to the left because of this styling:
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
To solve this, you could simply add pull-right to the input element's class:
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
It's also worth noting that a label element should have a for attribute matching the input element's id attribute, like this:
<div class="checkbox">
<label for="checkbox1">
<span>Text goes here</span>
</label>
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
</div>
UPDATED EXAMPLE HERE
Using form-check-prepend in parent div
<form>
<div>
<div class="form-check-prepend">
<label class="form-input-label" for="checkbox1">
This is the label for the checkbox
</label>
<input
type="checkbox1"
class="form-check-input pull-right"
id="checkbox1"
/>
</div>
</div>
</form>
I'm currently using this on my website. I have not tested it across different devices and/or browsers. Comments welcome...
This should do it! JSFiddle
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<span>Text goes here</span>
<input type="checkbox" class="checkbox style-2 " checked="checked">
</label>
</div>
How about this (note left-checkbox class):
<div class="form-group">
<div class="col-xs-4">
<div class="checkbox left-checkbox">
<label>
Text goes here
</label>
</div>
</div>
<div class="col-xs-8">
<div class="checkbox left-checkbox">
<input type="checkbox">
</div>
</div>
</div>
with css
.left-checkbox label {
text-align: right;
float: right;
font-weight: bold;
}
.left-checkbox input[type=checkbox] {
margin-left: 0;
}
Looks fine to me.
I am always looking for simple solutions first.
A KISS solution is:
<span style="white-space: nowrap;">Do Not Reverse Import
<label>
<input
type="checkbox"
name="DoNotReverseImport"
value="DoNotReverseImport"
OnChange = "OffYouGo('DoNotReverseImport');"
title = 'Check if old entries appear first in your import'
>
</label>
</span>
There are 2 things to correct to have Bootstrap 3 checkbox to the right of label text:
margin-left: -20px for checkbox
padding-left: 20px for label
Checkbox's size is 12.8px.
So our new values should be:
for checkbox: margin-left: 7.2px
for label: padding-right: 20px
Here is an example:
.checkbox.checkbox-left-label label,
.checkbox-inline.checkbox-left-label {
padding-left: unset;
padding-right: 20px;
}
.checkbox.checkbox-left-label input[type=checkbox],
.checkbox-inline.checkbox-left-label input[type=checkbox] {
margin-left: 7.2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h5>Checkboxes with labels on the left side:</h5>
<p>
<div class="checkbox checkbox-left-label">
<label>Option 1<input type="checkbox" value=""></label>
</div>
<div class="checkbox checkbox-left-label">
<label>Option 2<input type="checkbox" value=""></label>
</div>
<div class="checkbox checkbox-left-label disabled">
<label>Option 3<input type="checkbox" value="" disabled></label>
</div>
</p>
</div>
<div class="container">
<h5>Inline checkboxes with labels on the left side:</h5>
<p>
<label class="checkbox-inline checkbox-left-label">Option 1<input type="checkbox" value=""></label>
<label class="checkbox-inline checkbox-left-label">Option 2<input type="checkbox" value=""></label>
<label class="checkbox-inline checkbox-left-label disabled">Option 3<input type="checkbox" value="" disabled></label>
</p>
</div>