I had a set of radio buttons that were inline. I have since converted them to jQuery UI buttons with this line of code:
$("input:radio").button();
Now, they are all looking nice, but they are still aligned to the left. I can't fix this problem. I tried even using <center>, and everything in between, but it didn't center it as I wanted.
Here's the HTML:
<div style="display: <?php echo $visible; ?>;">
<form action="php/ratingsPost.php" method="POST" id="ratingsPost">
<input type="radio" class="radio" name="rate" value="1" id="1" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="1">1</label>
<input type="radio" class="radio" name="rate" value="2" id="2" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="2">2</label>
<input type="radio" class="radio" name="rate" value="3" id="3" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="3">3</label>
<input type="radio" class="radio" name="rate" value="4" id="4" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="4">4</label>
<input type="radio" class="radio" name="rate" value="5" id="5" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="5">5</label>
</form>
</div>
Any help?
According with documentation (last tab), you can specify a different theme for your JQueryUI components.
The whole radio buttons should be similar to this:
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Button Label</span>
</button>
All what you need is overwrite classes for your own design using personal CSS stylesheet. For example:
.ui-button .ui-button-text{
// personal style
}
Anyways, a little code using JSBin or JSFiddle as JohnP said could be nice to get a better view of your problem. Happy codding!
Related
I have created simple radio buttons so that the user can select the color they like. It worked for a while but has now stopped keeping the selected option. After selecting one, the option deselects itself when I press any other part of the page.
I never had the attribute 'name' of them the same before but they were working so I thought that might have been the issue that didn't solve it either.
<form name="newActivity" method="post" action="newActivity.php">
<?php include('errors.php'); ?>
<label class="colour-title">COLOUR</label>
<div class="select">
<label>
<input type="radio" name="colour" value="blue">
<span class="blue">BLUE</span>
</label>
<label>
<input type="radio" name="colour" value="purple">
<span class="purple">PURPLE</span>
</label>
<label>
<input type="radio" name="colour" value="pink">
<span class="pink">PINK</span>
</label>
<label>
<input type="radio" name="colour" value="green">
<span class="green">GREEN</span>
</label>
</div>
My radio buttons are also part of a form as shown above.
use id instead of class
The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.
example
<form name="newActivity" method="post" action="newActivity.php">
<?php include('errors.php'); ?>
<label class="colour-title">COLOUR</label>
<div class="select">
<label>
<input type="radio" name="colour" value="blue">
<span id="btn-color">BLUE</span>
</label>
<label>
<input type="radio" name="colour" value="purple">
<span id="btn-color">PURPLE</span>
</label>
<label>
<input type="radio" name="colour" value="pink">
<span id="btn-color">PINK</span>
</label>
<label>
<input type="radio" name="colour" value="green">
<span id="btn-color">GREEN</span>
</label>
</div>
So Im a complete beginner and Im stuck on some personal project. Im making forms and I want to have inputs from radio buttons all in the same line, but under the label. I know how to make all elements inline and I know that setting the block property should put them under label. But block element puts all of the inputs on its on line. What I want is all inputs to be on the same line, under lable. I can use tag in HTML, but I want to make it with CSS. Any tips?
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
just put a line break <br />
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<br />
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<br />
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
Set the label to display: flex; but make sure not to target the radio class or it will also effect the parent div and not work properly.
Instead of setting all of the radio buttons to display: block, setting just the label to display: block will get the effect you want. Block elements will start a new line (if needed) and force the next element to a new line as well. Since you want just the label to be on a new line by itself, setting it to display: block will do the trick.
label.radio {
display: block;
}
<div class="radio">
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio">
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
I want these radio inputs to stretch across the screen, rather than one beneath the other:
HTML
<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change
CSS
input[type="radio"] {
margin-left:10px;
}
http://jsfiddle.net/clayshannon/8wRT3/13/
I've monkeyed around with the display properties, and googled, and bang (bung? binged?) for an answer, but haven't found one.
In your case, you just need to remove the line breaks (<br> tags) between the elements - input elements are inline-block by default (in Chrome at least). (updated example).
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
I'd suggest using <label> elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>'s for attribute with the <input>'s id: (example)
<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>
<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>
<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>
..or wrap the <label> elements around the <input> elements directly: (example)
<label>
<input type="radio" name="editList" value="always"/>Always
</label>
<label>
<input type="radio" name="editList" value="never"/>Never
</label>
<label>
<input type="radio" name="editList" value="costChange"/>Cost Change
</label>
You can also get fancy and use the :checked pseudo class.
This also works like a charm
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked>Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
To get your radio button to list horizontally , just add
RepeatDirection="Horizontal"
to your .aspx file where the asp:radiobuttonlist is being declared.
Here is updated Fiddle
Simply remove </br> between input radio's
<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>
I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason.
Please refer to my code found in jsfiddle my code
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
Thanks
Either:
Generate a prefix that you apply to all the ids in a given instance of a form
Don't use for or id and place the form controls inside the label elements.
It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) code:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test" value="5" />
</form>
Why is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?
You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.
As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.
<input type="radio" id="test5" name="test" value="5" tabindex="5" />
But as they are treated as single element it might not work.
Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.
If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to the rest:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test2" value="5" />
</form>