If i have several input (radio or option) followed by their label, all on the same line. How i make it so it don't break the line after the radio, but break if needed after the label.
<input type="radio" id="i1"/><label for="i1">First radio</label>
<input type="radio" id="i2"/><label for="i2">Second radio</label>
<input type="radio" id="i3"/><label for="i3">Third radio</label>
I can think of wrapping both input and label in a span with nowrap, but wonder if there's another way.
This should do the trick:
#MyDiv {width: 250px;}
<div id="MyDiv">
<nobr><input type="radio" id="i1"/><label for="i1">First radio</label></nobr>
<nobr><input type="radio" id="i2"/><label for="i2">Second radio</label></nobr>
<nobr><input type="radio" id="i3"/><label for="i3">Third radio</label></nobr>
</div>
The <nobr> tag will ensure the break won't happen between the button and label.
CSS way is also possible, wrapping it with another <span> and using white-space: nowrap; should work fine.
I think this is what you're looking for: http://jsfiddle.net/catalinred/kNUaz/
Nothing worked for me (or at least I thought so, until I fixed it)...
My dirty solution therefore was to use the tables, 1 row, multiple columns. You may need to adjust the padding/spacing.
Edit: Warning this is a bad way of doing things, but if nothing works it might help.
<table border="0" >
<tbody>
<tr>
<td><input name="gender" type="radio" value="male" checked> Male </td>
<td><input name="gender" type="radio" value="female"> Female </td>
</tr>
</tbody>
</table>
Related
I have table in which i have input/radio buttons, and i need to make if user selects radio button in specific cell, that cell should have border, so that cell looks like selected. I dont have, any idea how to do this.
Here is example of table.
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio" checked="checked">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-3-radio" checked="checked">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-4-radio" checked="checked">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="tcr-radio" checked="checked">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
This should be done using jQuery and CSS.
Thanks for help.
This solution is at jQuery and CSS.
The border is added by the class, method addClass(). The class itself must be added to your CSS:
.current {
border: 1px solid green;
}
Also, method closest() is applied, which allows you to refer to the specified parent of the tag <td>.
$('input[type="radio"]').on('change', function() {
$('input[type="radio"]').closest('td.current').removeClass('current');
$(this).closest('td').addClass('current');
});
.current {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
To get you going in the right direction at least, here are some high level ideas:
When the radio button gets toggled, there are two possible ways you can leverage that to apply a style:
a. events like click and change are fired that you can respond to with your JavaScript.
b. The :checked CSS pseudo-class selector applies to the element if it's toggled on
either by adding/removing an attribute (usually a class attribute like 'active-cell') on the event, or leveraging the native pseudo-class, you'll need to add the styles to represent a border. (Here's a breakdown of why I say 'represent' a border: Applying borders to a single table cell when using border-collapse - it's not quite as simple as adding a css border property.)
Usually toggling a class is going to dramatically simplify your HTML and CSS because you can do a bit of DOM traversal to select a parent element of the input to apply the class and it's styles to.
Using the pseudo class is nifty in that it doesn't require JavaScript, but since CSS doesn't have a 'parent' selector, and you want to style the cell containing the input you have to get creative with your selectors...that would likely be done by having the element right after the input be selected, (or maybe a :before pseduo element) and adding some positioning and other styling to make it look like a border. for example:
input[type="radio"]::checked + label::before {
/* styles will apply to label elements that immediately follow selected radio inputs */
}
First, the radio buttons from the same group shall have the same name.. Also why all buttons are checked?
To achieve what you want you can use event listeners. there are event listeners for every action and then you can change the DOM when the action happens.
So with the radio button you can create an event listener for "change" action.
$(document).ready(function(){
$('input[name="prsten-2-radio"]').change(function(){
// remove border from other cells
$('input[name="prsten-2-radio"]').parent().attr('style', 'none')
//put a border only to the selected
$(this).parent().attr('style', 'border: solid black')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-2-radio">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten-2-radio">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
Here are some resources that might help you:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/jquery_events.asp
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/events/
Good luck!
I need my input radio elements + associated text to be the same width for alignment purposes. I tried this:
.rad {
width: 80px;
}
...but that only works on the radio element itself (centers them in a sea of blankness).
So I tried this:
.rad text {
width: 160px;
}
...but it does nothing.
The html intended for styling is:
<input type="radio" class="rad" id="visitor" name="travelertype" />Visitor
<input type="radio" class="rad" id="ucstudent" name="travelertype"/>UC Student
<input type="radio" class="rad" id="ucemployee" name="travelertype"/>UC Employee
UPDATE 2
Trying the answer, I get:
You'll need to change the markup to achieve this. There are many ways, here's 2 of them.
Method 1: Use separate table columns for radio buttons and the selects.
<table>
<tr>
<td>
<input type="radio" class="rad" id="visitor" name="travelertype" />Visitor
</td>
<td>
<select ...>
</td>
</tr>
... and so on.
</table>
Method 2: Wrap the text in <label>s and add style to the labels
<input type="radio" class="rad" id="visitor" name="travelertype" /><label for="travelertype" class="label-radio">Visitor</label>
CSS:
label.label-radio {
width: 100px;
}
See this https://jsfiddle.net/byB9d/6228/
<p><input type="radio" class="rad" id="visitor" name="travelertype" /> Value</p>
<p><input type="radio" class="rad" id="ucstudent" name="travelertype"/>
UC Student</p>
<p><input type="radio" class="rad" id="ucemployee" name="travelertype"/>
UC Employee</p>
You should put the text after each radio button in a <label> for screen readers. This will also help with the CSS.
<td><input type="radio" class="rad" id="visitor" name="travelertype" /><label for="Visitor">Visitor</label></td>
<td><input type="radio" class="rad" id="ucstudent" name="travelertype"/><label for="UC Student">UC Student</label></td>
<td><input type="radio" class="rad" id="ucemployee" name="travelertype"/><label for="UC Employee">UC Employee</label></td>
You can style the whole cell with the container <td>.
td {
width: 80px;
}
why can't one set a style like the font size in an input tag, e.g.
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
Secondly, what is the best way to do this then?
Thanks
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
For example:
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
There's not a lot you can do to style a radio button, however:
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
An example of a fix:
HTMl (example)
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
#form input {
font-size: 20px;
}
Hope this helps.
Try the following:
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
It may be better to either associate a <label> tag with each radio input (using the for attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the text to select the radio input instead of having to aim for a rather small circle.
So your markup looks like so:
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the for attribute of the label will match the id attribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1 gets selected.
You can then style the text of the label to your heart's content.
This is in regards to the second part of your question,
"Secondly, what is the best way to do this then?"
#input {
background-color: black;
color: green;
text-align: center;
}
<input id="input" value="Value" />
I am using radio buttons, but I am not sure how to align them how I want. I want them to be on the same line like this :
Option 1 o Option 2 o
But they appear like this :
Option 1 o
Option 2 o
Here is my HTML, can anybody advise?
<table>
<tr>
<td>
<label for="lblMeterName" />
</td>
</tr>
<tr>
<td>
Input/Output Group :
</td>
<td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
<input type="radio" name="rdoInput" value="No"/> No
</td>
</tr>
<tr>
<td>
<input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
Give your radio buttons and labels a class as follows:
<input type="radio" id="radioYes" class="inline-radio" name="radioGroup" value="Yes" />
<label for="radioYes" class="inline-radio">Yes</label>
<input type="radio" id="radioNo" class="inline-radio" name="radioGroup" value="No" />
<label for="radioNo" class="inline-radio">No</label>
Then apply the following CSS:
.inline-radio {
display: inline-block;
}
This is an improvement over the float method because float often requires additional semantics to prevent undesired rendering, whereas inline-block does not.
Put them in a table like this:
<td>
<table><tr><td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
</td><td>
<input type="radio" name="rdoInput" value="No"/> No
</td></tr></table>
</td>
This gives you the most flexibility concerning space in between or alignment with parent object.
You can wrap input and text into div and set float css property for div.
There are multiple solutions for this:
You could wrap another table around the radiobuttons and add each one to a table cell.
Add a <br/> after each option.
You could float the radiobuttons.
You could add a display:inline or display:inline-block to the radiobuttons.
I would prefer wrapping both the radiobutton and it's label in a <label> tag and applying float, since this would make the label clickable as well and provide you with more flexibility:
<label class="radio-label"><input type="radio" name="rdoInput" value="Yes"/> Yes</label>
<label class="radio-label"><input type="radio" name="rdoInput" value="No"/> No</label>
And the CSS:
label.radio-label {
float: left;
margin-right: 10px;
}
Add non-breaking spaces between radio buttons;
Use this:
<table>
<tr>
<td><input type="radio" name="rdoInput" value="Yes"/> Yes</td>
<td><input type="radio" name="rdoInput" value="No"/> No</td>
</tr>
<tr>
<td colspan=2><input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?
THanks!
I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.
label {
float: left;
padding: 0 1em;
text-align: center;
}
<label for="myChoice1">Choice 1<br />
<input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>
<label for="myChoice2">Choice ABC<br />
<input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>
<label for="myChoice3">Choice qwerty<br />
<input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>
<label for="myChoice4">Choice--final<br />
<input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>
...and then use your own clearing method to move to the next line.
(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)
Instead of the following:
<label>Label <input type="radio" id="val" name="val" value="hello"></label>
You can use this and style the two separately:
<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">
I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)
<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>
So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.