I have encountered a problem where I tried to click between black lines and it doesn't triggered anything, but triggers when clicked on the black lines. I added div so that I can add cursor pointer around the area. I am aware that it must be something with the for=nav-trigger located in the html, however "for" doesn't work with div. Is there a workaround?
<div id="menu">
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label id="menuButton" for="nav-trigger"></label>
</div>
Here is the link to jsfiddle: https://jsfiddle.net/dxs6040/51wdfypj/14/
Use the html like this:
<div id="menu">
<label for="nav-trigger">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<span id="menuButton"></span>
</label>
</div>
and add this to css:
label {
position: absolute;
height: 100%;
width: 100%;
cursor: pointer;
}
jsfiddle:
https://jsfiddle.net/e9qafkbr/
Related
I made a label because I wanted to apply css to the checkbox.
However, the label is not working except for the checkbox whose id is 'checkall'.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0"/>
<label for="checkall"></label> selelct All
</div>
</li>
</ul>
<% ArrayList<LikePdVO> likeList = (ArrayList<LikePdVO>)(request.getAttribute("likeList"));
for(LikePdVO vo : likeList) {
String arr[] = vo.getPhoto().split("\\*");
%>
<div class="cartProduct" id="<%=vo.getPd_id()%>">
<div class="fl cartCheck">
<input type="checkbox" class="check" name="<%=vo.getName()%>"
value="<%=vo.getOrder_price()%>" id="<%=vo.getPd_id()%>">
<label for="<%=vo.getPd_id()%>">
</label>
</div>
this is my code.
.cartDiv input[type=checkbox] + label {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #bcbcbc;
cursor: pointer;
}
.cartDiv input[type=checkbox]:checked + label {
background-color: #866744;
}
.cartDiv input[type=checkbox] {
display: none;
}
And this is CSS.
When you mean that the label is not working, I assume you mean that clicking on it doesn't cause the checkbox to be checked?
Either way, the label's text needs to be within the element, so it should be:
<label for="checkall">Select all</label>
And your other labels contain no text, so the label itself is probably quite small, despite the CSS, and therefore not clickable.
You need to set label text in the label tag not out side of it.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0" />
<label for="checkall">selelct All</label>
</div>
</li>
</ul>
</div>
I am a beginner, and I'm building a simple calculator in which there are several options that can be included in the total result. Upon checking a checkbox "front bumper" it will reveal three different options for that front bumper. This is not working the same with all options.
Once the CSS worked for the front bumper checkbox, I copied and pasted for the back bumper and the door handles...but only the front bumper and door handles is actually working, while the back bumper doesn't reveal any of the additional options when checked. The code for all three is identical (save the class names) so I'm not sure why they aren't working the same.
Like I said, I'm a beginner, so please excuse my messy code.
Just for context, the app is to calculate vehicle wrap pricing based on the options, it's my day job so easier to build apps for something I know a ton about already.
<div class="options">
<p>Options</p>
<div class="flexbox-one-a">
<div class="bumpers">
<div class="front-bumper">
<input type="checkbox"id="front-bumper"> <label for="front-bumper">Front Bumper</label>
<div class="reveal-if-active-front">
<input type="radio" name="front-bumper" class="front-standard"><label for="front-standard">Standard</label><br>
<input type="radio" name="front-bumper" class="front-complex"><label for="front-complex">Complex</label><br>
<input type="radio" name="front-bumper" class="front-highlycomplex"><label for="front-highlycomplex">Highly Complex</label>
</div>
</div>
<div class="back-bumper">
<input type="checkbox"id="back-bumper"> <label for="back-bumper">Back Bumper<label>
<div class="reveal-if-active-back">
<input type="radio" name="back-bumper" class="back-standard"><label for="back-standard">Standard</label><br>
<input type="radio" name="back-bumper" class="back-complex"><label for="back-complex">Complex</label><br>
<input type="radio" name="back-bumper" class="back-highlycomplex"><label for="back-highlycomplex">Highly Complex</label>
</div>
</div>
</div>
<div class="mirrors-and-handles">
<div class="mirrors">
<input type="checkbox" id="mirrors"><label for="mirrors">Mirrors</label>
</div>
<div class="door-handles">
<input type="checkbox"id="door-handles"> <label for="door-handles">Door Handles</label>
<div class="reveal-if-active-handles">
<input type="radio" name="door-handles" class="two-handles"><label for="two-handles">2 Handles</label><br>
<input type="radio" name="door-handles" class="four-handles"><label for="four-handles">4 Handles</label><br>
</div>
</div>
</div>
</div>
</div>
.reveal-if-active-front, .reveal-if-active-back, .reveal-if-active-handles {
opacity: 0;
max-height: 0;
overflow: hidden;
}
.options input[type="checkbox"]:checked ~ .reveal-if-active-front {
opacity: 1;
max-height: 100px;
overflow: visible;
}
.options input[type="checkbox"]:checked ~ .reveal-if-active-back {
opacity: 1;
max-height: 100px;
overflow: visible;
}
.options input[type="checkbox"]:checked ~ .reveal-if-active-handles {
opacity: 1;
max-height: 100px;
overflow: visible;
}
You forgot to close back-bumper <label> tag.
<label for="back-bumper">Back Bumper</label>
This is a common problem for beginners.
You can use these online tools to check your HTML code and find out related issues:
HTML Validator / Linter
Closing Tag Checker for HTML5 by Alicia Ramirez
In Bootstrap, how do I get checkboxes to align with other text on the same line? The checkboxes are always hanging lower than a line of text. I tried wrapping the separate text in a div and adding padding but it does nothing.
<div class="col-xs-12 move-down">
<div style="padding-top:7px; display:inline-block;">This is a new email address. Would you like to:</div>
<div style="display:inline-block;">
<label class="checkbox-inline" data-toggle="collapse" href="#collapsesignup">
<input type="checkbox" id="" value="option1"> Create account
</label> <label class="checkbox-inline">
<input type="checkbox" id="" value="option1"> Guest checkout
</label>
</div>
</div>
Looks fine when I copy your code into a jsfiddle
But, in situation like this, a position: relative would be helpful
https://jsfiddle.net/jacobgoh101/wne16hm1/
.checkbox-wrapper {
position: relative;
top: -1px;
}
Im crating a form with many fields and a checkboxes, the problem is that im trying to customize the checkbox(unsuccessfully) according with the style of my form.
As you can see in the picture, the tick of the checkbox is black, and i need it green. How can I change the color? How can I change the size of checkbox?
This is my HTML:
<div id="Cajamitad1">
<form role="form">
<div class="checkbox">
<label><input type="checkbox" value="" >
<a class="FontStyle">Vegano</a>
</label>
</div>
< div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Diabetico</a>
</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Celiaco</a>
</label>
</div>
</form>
</div>
and this my CSS:
#ContForm{
display: inline;
box-sizing: border-box;
}
.checkbox{
margin: 10px;
padding: 10px;
}
.checkbox input[type="checkbox"]{
margin-left: 5px;
}
#Cajamitad1{
margin-top: 10px;
width: 40%;
float: left;
padding-left: 200px;
}
Correct me if I'm wrong, but as far as I know this is not possible.
Here is my reasoning: if you inspect the bootstrap checkbox then you see that the checkbox itself is drawn by an <input type="checkbox"> and you have very limited control over that. Some browsers let you change the size of the checkbox but not all of them.
So the only thing you can do is to make your own checkbox, e.g. by using two images and some css.
Or often more mobile friendly are just two buttons side by side "yes" and "no". Then if you click one it becomes active, like some kind of toggle button.
I'm trying to make a color picker by setting up html like this:
<ol class="kleurenkiezer list-reset clearfix">
<li>
<input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
<label for="kleur_wit" style="background: white;"></label>
</li>
<li>
<input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
<label for="kleur_creme" style="background: #fffceb;"></label>
</li>
<li>
<input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
<label for="kleur_lichtbruin" style="background: #968272;"></label>
</li>
<li>
<input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
<label for="kleur_bordeauxrood" style="background: #941514;"></label>
</li>
<li>
<input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
<label for="kleur_oudgroen" style="background: #7fa298;"></label>
</li>
<li>
<input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
<label for="kleur_lichtblauw" style="background: #487eae;"></label>
</li>
<li>
<input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
<label for="kleur_oudgeel" style="background: #b79130;"></label>
</li>
<li>
<input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
<label for="kleur_zwart" style="background: #000;"></label>
</li>
</ol>
What I'm trying to do is make the actual radio button invisible to the user and make the label clickable so that I have a neat list of colored squares that you can select one of. Now my radio button doesn't seem to get checked.. Why would that be?
My css:
.kleurenkiezer {
width: 165px;
margin-left: -10px;
float: right;
}
.kleurenkiezer li {
position: relative;
width: 45px;
height: 45px;
margin: 0 0 10px 10px;
border: 1px solid #bbbbbb;
float: left;
}
.kleurenkiezer li input {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
.kleurenkiezer li label {
position: absolute;
top: 0;
left: 0;
width: 43px;
height: 43px;
}
New answer for really old question.. :) Not sure it's your case, but I'm experimentind the same exact issue when clicking labels on a page where there are 2 duplicated forms, one of the 2 always hidden. One is used on a page area for mobile devices, the other for desktop devices.
The one appearing first on html flow is working properly, the other no. Fake example, see js fiddle:
<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>
<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>
https://jsfiddle.net/stratboy/8ua16gm3/1/
So for now, for me, the trick here is to find a way to avoid form duplication.
The radio button work for me.
You can set in css display:none for input checkbox:
.kleurenkiezer input[type=radio] {
display:none
}
For the same thing (a colorpicker) i used another approach and i think it's simpler. Just replace your form with a list of buttons and build 1 function where you pass the color. it's something like this:
<li class="color-box"><button type="button" class="color-btn" style="background-color:#BDC3C7;" onclick="wFontColour('#BDC3C7')"></button></li>
then in your function you do whatever you need to with that colour, in my case it looked like this:
function wFontColour(fontColour) {
document.execCommand("foreColor", false, fontColour);
};
if you want to keep your approach, give your label an id and try this:
$('#myLabel').each('click', function(){
$(this).closest('input:radio').attr('checked', 'checked');
});
Setting an attribute checked won't allow to re checked when you clicked once again. it will work for only once. Give following code a try
$(document).on('click','li label', function(){
$(this).closest('li').find('input:radio').trigger('click');
});
I experienced the same problem as #Luca (and possibly OP) using simple_form_for() in a mobile view and a desktop view. The mobile and desktop inputs had duplicate ids that were causing issues. I ended up using :namespace in the mobile view form:
<%= simple_form_for(:registration, namespace: "mobile") do |f| %>
The namespace generated ids that were unique and my radio buttons worked correctly after that.