I am trying to create a list of 3 checkboxes and next to two of the checkboxes, I want a small checkbox to hide the specific property.
I just have a problem of position the checkboxes properly.
I guess it should be something like
<ul>
<li>
<label>
<input type="checkbox">
Property 1
(
<label>
<input type="checkbox">
Hide
</label>
)
</label>
</li>
(...)
</ul>
but maybe it is not good to place the hide checkbox inside the other checkbox-label, so maybe I should create a table, so the two checkboxes can be aligned next to each other.
use style="display: inline-block;" inside of input tag
Related
I have <input type="radio" which i need to make activated when i click on <li> element. I have <label><li></li></label>, label is used to activate radio here (it works). The problem is <li> visually gets separated from other <li>s. I tried making <li><label></label></li> but it makes radio activated only when text inside <label> is clicked. In other words, i need <li><label></label><li> to work even when i'm clicking not the insides of <label></label>. Here's the picture of when it's <label><li></li></label> (ignore radios, those are not the problem):
This problem isn't about radio - I have shown radio on screenshot just to know if radio successfully activated by clicking on label or not. The problem is <label><li></li></label> has <li> inside but it's the <label> which should be inside <li>. If I do so (label inside li), then only "test-60" text is clickable and activates radio, not the whole <li>
<label for="radio-button">test 60</label>
<input type="hidden" value="test-60" id="radio-button"/>
also, recommend making input in position absolute and top 0 and left 0
Example
I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup:
<label>
<input type="checkbox"> Check me out
</label>
instead of this:
<input type="checkbox" id="a"><label for="a">Check me out</label>
I just would love to know why they went with the nested approach. I can't see any upsides. The huge huge downside is, that checked/unchecked states cannot be styled with CSS such as:
input:checked + label { }
The answer is user-experience. Nesting your radio or checkbox inputs inside a <label> provides additional functionality. Consider:
<label>
<input type="checkbox" value="">
This is my Checkbox Option inside a Label
</label>
In the above code the checkbox is selected by clicking on either the box itself or the text within the <label>.
While in the below code the <label> text is not clickable. The only way to select the checkbox is to click directly upon the box.
<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>
I have 5 checkboxes on Slickgrid with the HTML like so:
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
So if I run a css selector - input[type=checkbox] on Firebug, the first element in that list of elements is the first one (as expected)
Then if I select the first checkbox, the HTML for that element(the first checkbox) gets a new attribute checked="checked". But slickgird now shoves is the element at the bottom of the list, but maintains the styling.
So now when I run the same CSS selector input[type=checkbox] , the first element in that list of elements is the SECOND checkbox, which visibly looks incorrect.
SO question is how do i prevent slickgrid from doing that.
It is because of slickgrid. If a user takes an action on the first element, Slickgrid inserts that row to the bottom of the list but keeps the styling as before.
so using the twitter bootstrap CSS framework,
if you display this html it will show with the text under the radio button, i want them to show to the right * or left of the radio button
this works if you replace Gender with Gender it will have the desired effect
however i do not have control over changing the tag to a span tag (im using a java based framework)
however i can prefix and suffix the html - shown in the example below
######## ADD PREFIX HTML ############<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>#######ADD ADD SUFFIX THML ############
ur a wizard if you can get this working!, thanks guys
<div class="clearfix">
<label id="optionsRadio">Gender</label>
<div class="input">
<ul class="inputs-list" wicket:id="gender">
<li>
<label>
<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>
</label>
</li>
<li>
<label>
<input type="radio" name="optionsRadios" value="option2" />
<label>Gender</label>
</label>
</li>
</ul>
</div>
The radio buttons on the bootstrap demo page render as you expect so there is either something in your own CSS causing this or a problem with your markup.
My guess is that the problem is because you have your radio buttons and your labels nested inside another label. Try removing the wrapper label and see if that works.
The label element must not have any nested label elements.
I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, another 2 radio buttons would appear.
How can I do this in HTML?
HTML and CSS3-only version (Fiddle):
HTML for group "D" (other groups are similar)
<div>
<input type="radio" name="level0" value="D" id="D"/>
<label for="D">D</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="D0" id="D0"/>
<label for="D0">D0</label>
</div>
<div>
<input type="radio" name="level1" value="D1" id="D1"/>
<label for="D1">D1</label>
<div class="sub2">
<div>
<input type="radio" name="level2" value="D10" id="D10"/>
<label for="D10">D1-0</label>
</div>
<div>
<input type="radio" name="level2" value="D11" id="D11"/>
<label for="D11">D1-1</label>
</div>
</div>
</div>
</div>
</div>
CSS
.sub1, .sub2 { display: none; }
:checked ~ .sub1, :checked ~ .sub2 {
display: block;
margin-left: 40px;
}
If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.
Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.
Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D
You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:
<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple
<input type="radio" id="extra1" style="visibility:hidden" other choice here />
<input type="radio" id="extra2" style="visibility:hidden" other choice here />
#guffa I think I'll just modify your answer a bit. Put all the optional radio buttons inside a <div> element like this:
<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>