I have this HTML and CSS
http://jsbin.com/uciya5/3/edit
where the problem is that the radio buttons are treated as individual elements and therefore inherent the properties of class="cellData". Notice how wide the radio buttons are spaced vertically.
<div class="cellData">
<input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
<input name="ctype" value="course" type="radio" /> Course </div>
</div>
Is it possible to control this vertical spacing of the radio buttons, or perhaps wrap a DIV around them to protect them?
Update
Removed template tags.
You could add another class to the div containing radio buttons:
<div class="cellData cellRadios">
with CSS (similar to this):
.cellRadios { line-height: 1 }
See: http://jsbin.com/uciya5/2
Provided that in your CSS you define .cellRadios after .cellData, the line-height from .cellRadios will be the one that's applied.
I'd probably also change .cellRadios to a better name.
If you prefer it, you could instead wrap the radio buttons in an extra div, as you suggested in your question.
<div class="cellData">
<div class="cellRadios">
<input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel
<br>
<input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course
</div>
</div>
You could delete this from the CellData stye: line-height:4em
You could also try using a table, it would be a lot simpler.
Related
Problem: Grouping form elements
I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons.
I'd like to group those inputs and it's label explicitly, so that the screen readers would also (in addition to the visual representation by aligning them on a single line) be able to understand and announce this relationship.
For example, let's say I have a control like this:
<div class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Standard solution problems: Fieldset styling issues
fieldset element and it's child legend seem to be made exactly for that (used in the example below).
The problem is that fieldset and legend elements can't be styled like normal elements (some discussion about it) and nowadays other than in Firefox it's impossible to align them on a single line using Flexbox, which my layout requires.
<fieldset class="control">
<legend class="control-label">Type</legend>
<div class="form-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</fieldset>
Question: Is there some other way?
That makes me wonder if there is some accessible way to group several form controls other than using fieldset element?
Possible solution: role="group"?
There is a "group" role (used in the example below), which could be added to a simple div and it looks like it might do the job, but nowhere is stated clearly that it is the functional equivalent to using a fieldset. And if it does, then how do I mark an element of this group to serve as an equivalent of legend?
<div role="group"
class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Basically you have already answered your question in the Possible Solution section (btw, as a blind person, I'm just impressed how you styled your question with headings!). You missed one tiny and simple thing, the aria-label attribute:
<div role="group" class="control" aria-label="Type">
Note: this will be invisible on screen, it is a screen-reader only solution. If however you want to make it visible, do the following using the aria-labelledby attribute instead:
<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>
The pseudolegend may be a span or even a p, of course, if you find it more appropriate.
A quick and dirty local test I made showed that, at least with JAWS and Chrome, there is no difference between a fieldset and a div with aria-label.
Note: For radio button groups in particular you can use role=radiogroup. Also, in order for the semantics of a group or radiogroup to be expressed to screen reader users an accessible name for the grouping element is required.
I would like to display remember me checkbox and submit button inline using Bootstrap 3 inside my Login form.
<div class="row">
<div class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
They do not align vertically very well, especially on mobile size. I would like them to be vertically aligned so the checkbox is in the middle of Submit button.
Also Remember me label is not aligned nicely with checkbox, it seems like words Remember me are slightly higher than chekcbox.
How to solve this ?
What you could do is create another row class inside of the first one. Then inside of that create two classes of two, so col-x-6 twice. Inside one place the check box and inside the other place the button. Then use CSS to clean up and misalignment.
I don't know if this will solve the problem, but it may be worth a try!:)
I can't figure out why the spacing between the radio input and link is different for the first element than for the other two.
Here is the HTML:
<div class="citationChoice">
<label for="mla">
<input type="radio" name="citation" value="mla" id="mla_button" checked="checked">
MLA
</label>
<label for="apa">
<input type="radio" name="citation" value="apa" id="apa_button">
APA
</label>
<label for="chicago">
<input type="radio" name="citation" value="chicago" id="chicago_button">
Chicago Manual of Style
</label>
</div>
jsFiddle
For some reason, without any css applied, the mla radio button is closer to the MLA link than the other radio buttons are to their adjacent links.
(I know the HTML is not completely correct. If at all possible, I have to leave the HTML as is.)
You had a space before <a and jsfiddle was interpreting that. The first MLA link did not have this space, that is why it sat closer to the radio button
BEFORE -
id="apa_button"> <a
AFTER FIX -
id="apa_button"><a
Here is some code I modified from this nifty site:
http://jsfiddle.net/Ajhka/
I have all the elements styled with a checkbox images,..fonts, colors etc.
I just don't know how to do the layout. I don't have a strategy. But what I want is only slightly different from the fiddle.
I want the Title and Content Text aligned like they are but I went them placed to the right of the check boxes, where the title is at the same height as the check box. This would make most sense and be the most readable.
How would I go about doing this?
Here's my version: http://jsfiddle.net/Ajhka/5/
I didn't change your CSS at all - just the HTML.
<form id="privacy">
<div>
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<span class="privacy_title">Normal</span>
<span class="privacy_content">When you add a bookmarks it is posted to the feed. You have a public page which can be viewed by non-members.</span>
</div>
<div>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
<span class="privacy_title">Private</span>
<span class="privacy_content">The bookmarks you add are not posted to the feed. You do not have a public page.</span>
</div>
<div>
<input type="radio" id="radio3" name="rdo">
<label for="radio3"></label>
<span class="privacy_title">Secret</span>
<span class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</span>
</div>
</form>
To get this layout I swapped your <p> tags for <span>. Then I wrapped each set of radio/title/text in a <div>. You could tweak spacing a bit with CSS if you so chose.
I've updated your fiddle with a working example
http://jsfiddle.net/Ajhka/2/
Looks like this is what you're looking for. The 1st row is with the header next to the checkbox and the description below it.
The other two are with all the text next to the checkbox.
If you want have all the others as example row 1. move the <div style="clear: both"></div> 1 row up.
If you want the description text to be aligned with the header text. use margin-left on your <p> element to align it or put it all in a <table>.
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>