I have a set of radio buttons inside a div which has a fixed height and overflow:hidden. Some of the radios get hidden because they would be naturally positioned outside the height of the containing div.
When a radio is selected, and that radio is outside the visible part of the div, the div gets scrolled.
What I want is to be able to lock the scrolling of the div, regardless the currently checked radio is visible or not. I don't want the div to scroll.
Instructions to reproduce:
In FF/IE:
Click on a radio button
Use up/down arrows
Here is the code: http://www.jsfiddle.net/kANKu/1/
<div style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
<input type="radio" name="rad1" value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1" value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1" value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1" value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1" value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1" value="hello" id="hello6" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1" value="hello" id="hello7" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1" value="hello" id="hello8" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1" value="hello" id="hello9" /><label for="hello9">hello9</label> <br />
</div>
This is indeed a very strange request you have here. I have absolutely no idea what you are trying to accomplish here. However here is your Solution:
Firefox scrolls the selected item into view, thats just a a build in behaviour. There is no specification or magic attribute for that or something.
However you can do a little hack which i did in the example below:
You could play around with onkeydown events or onfocus and reset the scrol in javascript but that would be nonsense.
Just place the elements that you don't want to get scrolled to inside the visible area. I did it on the top right.
Then make it visibility:hidden et voilá.
It will be selected on arrow down and the value etc will still be submittet (i tried it with wrapping an missing form tag around the whole thing and a submit button).
This is very ugly and in my understanding absolutely weird and stupid, but as I said i don't know what your goals are!
Here comes your updated code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
#strangediv {
position: relative;
}
#strangediv input.invisible {
top: 0px;
left: 0px;
position: absolute;
visibility: hidden;
}
</style>
</head>
<body>
Try this in FF/IE
<div id="strangediv" style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
<div id="holder">
<input type="radio" name="rad1" value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1" value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1" value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1" value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1" value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1" value="hello" id="hello6" class="invisible" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1" value="hello" id="hello7" class="invisible" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1" value="hello" id="hello8" class="invisible" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1" value="hello" id="hello9" class="invisible" /><label for="hello9">hello9</label> <br />
</div>
</div>
</body>
</html>
Related
I am trying to get my gender button to align with my radio image buttons this is the codes have so far. It gives me the text above the button. Thank you in advance
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png" />
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
I've corrected the misplaced </div> so your HTML is now like this.
Then just apply flexbox
.genderalign {
display: flex;
align-items: center;
}
<div>
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png"/>
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
</div>
I have the following code of inputs
<div id="especiality">
<input type="radio" class="rad" name="Item1" value="Item1" />Publicidad
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Editorial
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Identidad Corporativa
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Web
<br />
<input type="radio" class="rad" name="Item5" value="Item5" />Empaques
<br />
<input type="radio" class="rad" name="Item6" value="Item6" />Tipografía
<br />
<input type="radio" class="rad" name="Item7" value="Item7" />Fotografía
<br />
<input type="radio" class="rad" name="Item8" value="Item8" />Señalética
<br />
<input type="radio" class="rad" name="Item9" value="Item9" />Animación
<br />
<input type="radio" class="rad" name="Item10" value="Item10" />Ilustración
<br />
</div>
That works with this script
<script>
$(document).ready(function () {
$("#button").click(function () {
// Radios
$(".rad:checked").each(function() {
console.log("Radio: " + $(this).val());
});
});
})
</script>
It works for select multiples options and thats ok but it doesn't when it comes to deselect the option. Any solutions?
Thanks
Selector for unchecked items would be:
$(".rad:not(:checked)").each(function() {
Radio buttons are designed to let you select exactly one out of a group. You can start a group with zero selected (by omitting the checked attribute from all of them) but there isn't a clean way to go back to that state.
To group radio buttons, give them all the same name.
If you want to select zero or more from a group, you should be using checkboxes, not radio buttons.
i have the following situation:
i have made hidden checkboxes and labels which are clickable.
when testing in browsers all works like a charm, but on ipad the label only take the click, when i am not hitting any text, which is in the label.
why is that so?
here my markup of one box:
<input name="Quantify-Studienzusammenfassung" value="no" type="hidden" />
<input class="chk_button" name="Quantify-Studienzusammenfassung" id="chk_quantify_studien" type="checkbox" value="yes" />
<label for="chk_quantify_studien">
<div class="label_div">
<h3>Quantify-Studienzusammenfassung:</h3>
<p>Kurzatmigkeit vs. Tiotropium/Formoterol (in freier Kombination)</p>
</div>
</label>
Hi Please try it me be it's work
.chk_button{
float:left;
}
label{
float:left;
width:100%;
}
<input name="Quantify-Studienzusammenfassung" value="no" type="hidden" />
<input class="chk_button" name="Quantify-Studienzusammenfassung" id="chk_quantify_studien" type="checkbox" value="yes" />
<label for="chk_quantify_studien">
<div class="label_div">
<h3>Quantify-Studienzusammenfassung:</h3>
<p>Kurzatmigkeit vs. Tiotropium/Formoterol (in freier Kombination)</p>
</div>
</label>
I have a bunch of radio buttons with labels of variable length. I was wondering how I can horizontally center them so that the labels are at the center of the page, but appear 'left aligned'.
Desired outcome:
Current HTML code:
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />
display: table is good for this: http://codepen.io/pageaffairs/pen/vKkAq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {display: table; margin: 0 auto; padding: 30px; background: #e7e7e7; border: 1px solid black;}
</style>
</head>
<body>
<div>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label>
</div>
</body>
</html>
One way to do it is by using a <div> which is center-aligned, and then use a <span> styled as an inline-block,
<div style="text-align: center;">
<span style="text-align: left; display: inline-block; border: 1px solid grey; padding: 0.5em;">
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length variable lenght</label><br />
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length variable</label><br />
</span>
</div>
you can use a borderless table and have the actual radio buttons separate from their labels.
or if you don't want to use a table, use divs with relative positioning and perhaps attribute float set to left.
Hi I'm trying to align two set of checkboxes in form side by side and make the checkboxes align nicely but everytime I get the checkboxes side by side the one on the right will be mess up depend on the text size on the left
so I'm wondering if there is a way
here is the code
UPDATE THE BROKEN CODE.
http://jsfiddle.net/Ysf7t/1/
Easiest way would be to give the names (i.e. "Soccer", "Mercedes", etc.) a fixed width through CSS.
Basically something like this:
<h1>Sports</h1>
<div>
<input type='checkbox' name='system_type17' value='2' />
<input type="checkbox" name="system_type3" value="5" />
<span style="width:100px;display:inline-block;">Soccer</span>
<input type='checkbox' name='system_type17' value='2' />
<input type="checkbox" name="system_type3" value="5" />
<span style="width:100px;display:inline-block;">Mercedes</span>
</div>
<div>
<input type='checkbox' name='system_type18' value='3' />
<input type='checkbox' name='system_type4' value='4' />
<span style="width:100px;display:inline-block;">Mercedes</span>
<input type="checkbox" name="system_type7" value="2" />
<input type="checkbox" name="system_type8" value="3" />
<span style="width:100px;display:inline-block;">Mercedes</span>
</div>
Of course, ideally, the CSS shouldn't be inline. But I hope you get what I mean.