Menu
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.
983
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.
If you want to display radio buttons horizontally, you will need to use the CSS float property. The float property can be set to left, right, or none. By default, radio buttons are displayed vertically, so you will need to set the float property to left or right in order to display them horizontally.
To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component. We add the RadioGroup component with the row prop to disable the choices in a row. And we set the onChange prop to setValue to set the selected choice as the value of the value state.
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.
65
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
