I wrote the HTML below to display two radio buttons and some text.
<input id="radio1" type="radio" checked="checked"/>Create the application name <br/>
<input id="radio2" type="radio"/> Create the Source name
My issue is that the radio buttons and the text are not aligning properly. The radio buttons are displaying a little bit below the text. How do I align the radio buttons and the text on the same line with proper alignment?
Demo
vertical-align: middle:
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
The problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes.
Use inline style, weird but true:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
<br/>
<br/>
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
<br/>
<br/>
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
Edit
this short explanation by Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render respectably in Chrome, IE, Firefox, Opera, and Safari.
What I did was add td{ line-height:1.5em }
Not too clear what you're after specifically..but:
Demo Fiddle
Add:
input{
vertical-align:top;
}
You may also want to chage this to vertical-align:middle;margin:0; depending on your requirements.
Try it below code...
input {float: left;
margin-top: 3px;}
add style for input type as
input
{
vertical-align: top;
}
and avoid the space in front of Create the Source name.
<input id="radio2" type="radio"/> Create the Source name
<input id="radio1" type="radio" checked="checked"/><label for="radio1">Create the application name</label>
<input id="radio2" type="radio" /><label for="radio2">Create the application name</label>
input,label{
vertical-align: top;
}
FIDDLE DEMO
<form >
<label>
<input name="radiobutton" type="radio" value="radiobutton" />
Man</label>
<label><br>
<input name="radiobutton" type="radio" value="radiobutton" />
Women</label>
</form>
/******this will help you********/
Related
I'm using Bootstrap 3 and trying to center a radio button, an icon, and some text and am having no luck.
My form simply is simply stuffing everything inside a label tag which seems to be a lot.
The skeleton code I started with is below:
<form role="form">
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconOne"></div>
<br/>
Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconTwo"></div>
<br/>
Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconThree"></div>
<br/>
Icon Three
</label>
</form>
Here's the JS fiddle:
http://jsfiddle.net/4zh28rcn/4/
I'm tempted to try something like Flexbox but am wary of importing more third party libraries.
Thanks for any helpful pointers!
I'm not sure where it's coming from, but you appear to have a stray alignment pushing the <input> 20px to the left of where it ought to be.
If you add the CSS below to what you have in your fiddle already, you will see the radio buttons, the icon images and the text all centered and all lined up:
.radio-inline {
width: 100px;
padding: 0;
text-align: center;
}
input {
display: block;
position: relative;
left: 20px;
width: 100%;
}
Im having the following html for radio buttons,and I have added the css also
<br/><br/>
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<br><br>
<br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
<br><br>
its css is
/*
Hide radio button (the round disc)
we will use just the label to create pushbutton effect
*/
input[type=radio] {
display:none;
margin:10px;
}
/*
Change the look'n'feel of labels (which are adjacent to radiobuttons).
Add some margin, padding to label
*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[type=radio]:checked + label {
background-image: none;
background-color:#d0d0d0;
}
but the radio buttons doesnt align in one line
here is the jsfidlle http://jsfiddle.net/8ew6g/3/
heres the link http://jsfiddle.net/8ew6g/9/ [solved]
The radio button is below payment mode label,i have applied some css on it,so it wont look like a basic rabio button
Update:
This resource might also be useful, as it uses similar code and the result is inline.
I would suggest following this advice and then wrapping your code with the title in a fieldset. This will allow you to make a legend, so your code will look like this:
<fieldset>
<legend><strong>Payment Mode- Select your payment mode</strong></legend>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Debit Card</label>
</fieldset>
You will also want to add this to your CSS:
fieldset {
border: none;
}
You can try this:
<table>
<tr>
<td>
<input type="radio" id="radio1" name="radios" value="CC" checked />
<label for="radio1">Credit<nobr/> Card</label>
</td>
<td>
<input type="radio" id="radio2" name="radios" value="DB">
<label for="radio2">Debit<nobr/> Card</label>
</td>
</tr>
</table>
in order to make sure that the line doesn't break between the two words, which happened when I tried it on your Fiddle.
Your HTML is rather muddled, particularly given the div elements tagged as table and row, so I am not quite sure what to make of it. I am hesitant to recommend a table, particularly in light of this, so maybe you should consider if there is something you could do other than using completely fake radio buttons.
Remove the two <Br /> tags you have between the radio buttons
and wrap the radio buttons with <div> and increase its width to about 180px
like:
<div style="width:180px;">
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
</div>`
My HTML radio buttons are lining up vertically not horizontally. Also, the text for each of them is not right beside the button like I wish it would be.
<fieldset>
<legend>Payment Method</legend>
<input type="radio" name="payment_type" value="bill"/>
<label for="bill">Bill Me</label>
<input type="radio" name="payment_type" value="credit" checked/>
<label for="credit">Credit Card</label>
<input type="radio" name="payment_type" value="paypal"/>
<label for="paypal">Paypal</label>
</fieldset>
That is the code for my HTML buttons. I have an external style sheet, but I have not implemented any styling for the buttons as of now.
Checkboxes are aligned horizontally by default, as are the labels. You must be setting display:block on an element. Either remove that, or overwrite it by applying display:inline-block.
Try the following CSS:
input[type="radio"] {
display:inline-block;
}
label {
display:inline-block;
}
As I said, these are default properties. You should receive the following results. jsFiddle here It would be better just to remove display:block as opposed to merely overwriting it.
What is a quick and easy way to make sure that my text and textboxes are lined up correctly on all screen sizes?
<style>
form {display:table;}
label {display:table-row}
label span , input {display:table-cell;}
</style>
<form>
<label>
<span>Name:</span>
<input type="text" name="Name"/>
</label>
<label>
<span>Phone:</span>
<input type="text" name="Phone"/>
</label>
</form>
Works for IE8 and newer
I have the following HTML:
<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+
How do I change the spacing between the radio button and the "1+" text? I'd like the text to be closer to the radio button, but the browser is inserting a certain amount of undefined padding between the two elements.
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
You'll need the label element.
<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>
You can then style this like this:
label {
margin-left: -3px;
}
Also note the use of the for attribute for accessibility purposes.
Just change the input id's width to auto in css.
#input-id {
width: auto;
}
You can add this to your stylesheet:
input[type="radio"] {
margin-right: 10px;
}
First Create id's inside input tag (eg id="input1"), then style id's in css file(eg #input1{margin-left:5px; margin-top:5px;}) also you can use inline styling using margin-top:5px,and margin-left:5px
<input type="radio" name="beds" value="1" id="first" />
<label for="first">
1+
</label>
<input type="radio" name="beds" value="2" id="second" />
<label for="second">
2+
</label>
this is what you have
change your +1 (and +2) to
<h:outputText value ="+1" style="margin-left: -3px"/>
You have to mess with the style of the text you are using as a label, and to do that you need it to be an actual element, not just raw text.