I have the following scenario using Bootstrap.
The problem is that when I change the visibility of the first checkbox, it kinda breaks the spacing of the layout.
<label for="">Filter</label>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 2
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 3
</label>
</div>
You can test in this CodePen it by clicking on the button.
Did I build badly the HTML? Or am I missing some feature here
The margin-top for .checkbox+.checkbox is set for -5px, this rule applies, regardless of if the first checkbox is visible or not. Better solution would be to add the margin to the text above (which should be no label!) and don't set different margins for the different checkbox-classes.
<p>Filter</p>
<ul class="checkbox list-unstyled">
<li> <label> <input type="checkbox"> Filter 1</label> </li>
<li> <label> <input type="checkbox"> Filter 2</label> </li>
</ul>
You would need to change your JS to $(".checkbox li").first().toggleClass('hidden')
Related
I was trying to do this with jquery (How do I get javascript to run more than once?) but some people said it can be done easier with CSS. Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected. This is used to replace the buttons with images.
Is there any way to use CSS so that when the ez-selected class is added, it turns the text in the span tag to bold and then removes the bold when the ez-selected class is removed? I cannot change the HTML structure as it's coded in my shopping cart software. Thanks!
EDIT: Is there any kind of CSS selector that can style the span closest to the input checked? I know with + it can select an element right after another element, but is there a way to just select the next span element after a checked radio button even if that span is in another div?
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
The .ez-selected div is not a previous sibling or parent of the span...so NO...you can't.
Not with this structure
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio ez-selected">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
You would have to travel up the DOM first and you can't do that with CSS because there is no parent selector
Hello I've got this style
.portfolio-filters input[type=checkbox]:checked{background:#cb2127}
and my code is
<ul class="portfolio-filters list-unstyled">
<li>
<div class="form-group">
<input id="custom-software" type="checkbox" name="" value="" checked="">
<label for="custom-software">Custom Software</label>
</div>
</li>
The problem is that inside this div form-group if I add hidden input fields, it breaks the CSS.
Do you have an idea how I can fix the problem?
How do you hide input? Your should use display:none if you don't want to maintain its position
I'd like to have multiple radio button when it is a big screen (and the label on the top)
and a drop down list when it's smaller
Is it possible with bootstrap to handle that case?
I think it's possible to hide the data on xs / s screen and vice versa but I don't know if it's a good idea
Yes, use http://getbootstrap.com/css/#responsive-utilities as D_Supreme suggested. It is a good idea.
<div class"visible-lg-*">
<span class="label label-default">New</span></h1>
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
</div>
Then do the following with your "small" version
This site:
http://proto.io/freebies/onoff/
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
The issue with this is the labels seem to require the use of the for attribute and the checkboxes require an id. Obviously with a form of many checkboxes this could prove quite annoying to have to create unqiue id's all the time. I altered it slightly (the css is on the fiddle), but does anyone know if there is a reason the checkbox was originally placed outside the label and not within? It seems to work fine within..
http://jsfiddle.net/UJw4F/
<div class="onoffswitch">
<label class="onoffswitch-label">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
This other guy has done the same with placing the checkbox outside the label:
http://cssdeck.com/labs/radio-buttons-clean
w3.org - Any input element descendant of a label element with a for attribute must have an ID value that matches that for attribute
Without the 'for' attribute
You can do
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<label class="onoffswitch-label">My Label</label>
And the label will be associated with the checkbox
Follow me #mickjguy
I am writing an HTML5 page at the moment, I'm having an issue switching format from using br for line spacing to line-height, padding, or margin (whichever is easier). Everything is inside of a form and fieldset tag I do not want every line to be on their own, just some. Some text I do want next to each other because I am making a form that has radio buttons and check boxes. But instead of using br tags how I can switch that out to line-height, padding, or margin in css.
<form>
<fieldset class = "top">
Please Select a car: <br>
<input type="radio" name="car" value="truck">truck
<input type="radio" name="car" value="van">van
<input type="radio" name="car" value="suv">suv<br>
<input type="radio" name="car" value="coupe">coupe
<br>
<br>
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="red">red
<br>
<br>
<input type="checkbox" name="color" value="Orange">Orange
<input type="checkbox" name="color" value="black">Black
<br>
<br>
<input type="checkbox" name="color" value="Green">green
<input type="checkbox" name="color" value="brown">brown
<br>
<br>
....
Try to use a fieldset for each group of radios so you can control them more precisely, put margin only around your group and etc.
You can use labels and span around the label/input groups, so you can control them better.
<span>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</span>
Also if you use a class specific for your input, you can make it display in block, like this:
input.block {
display: block;
}
then if you put this class block on your input the label will stay in another line...
For a bigger picture see this fiddle:
http://jsfiddle.net/BxwNL/1/
Update: another solution according to cinnamon comment
You can also use a list for your items, but it would make sense if you grouped them according to their properties, like a list for the colours, a list for the types...
The usage would be like:
<ul>
<li>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</li>
<li>
<label for="name2">Value2</label>
<input type="checkbox" name="name2" value="2"/>
</li>
</ul>
Fiddle example for the list solution:
http://jsfiddle.net/BxwNL/2/