I am trying to put a bunch of radio buttons in a form. Each has a label, and all the way to the right of the label should be an X (hence the class:pull-right). For some reason, each time I add a new radio button, the X gets pulled more and more towards the center of the form. Here is the code; see link below for what it produces. Can someone please explain what is happening/how I can fix the alignments? Note: each successive X is shifting by an additional 8px, which happens to be the border-radius of the form; not sure if this is just a coincidence.
Edit: what I have tried: putting each set of input/label/p tags in its own row, and also span; neither worked. I have tried playing with the pull-right class but when I remove it, the X's actually get sent to the next line below.
<form style="border:2px black solid; border-radius: 8px; padding:5px;">
<input style="margin-left:5px;line-height:30px" id="labelA" type="radio" name="letter" value="A" checked="true"></input>
<label for="labelA" style="font weight:normal">A</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>
<input style="margin-left:5px;line-height:30px" id="labelB" type="radio" name="letter" value="B" checked="true"></input>
<label for="labelB" style="font weight:normal">B</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>`
<input style="margin-left:5px;line-height:30px" id="labelC" type="radio" name="letter" value="C" checked="true"></input>
<label for="labelC" style="font weight:normal">C</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
</form>
Output: http://imgur.com/zADCGRY
Removed the styles just to show what I did in a simple manner.
Generally I would not recommend using pull-right/left as it's effects will occur down the ENTIRE HTML until you call something like div class="clear" />.
Just use float if possible.
JSFiddle Demo
HTML
<form style="border:2px black solid; border-radius: 8px;">
<input id="labelA" type="radio" name="letter" value="A" checked="true" />
<span>A</span>
<span class="x">X</span>
<br>
<input id="labelB" type="radio" name="letter" value="B" checked="true" />
<span>B</span>
<span class="x">X</span>
<br>
<input id="labelC" type="radio" name="letter" value="C" checked="true" />
<span >C</span>
<span class="x">X</span>
</form>
CSS
.x {
float:right
}
Some further advice, one thing I have learned is if I am having issues styling stuff and I am jamming styles on individual elements, I am most likely thinking wayyy to hard on it. Try to keep CSS simple. :)
Related
I have used a black colour background image for my HTML page. I want to change the radio button labels/ texts to white ( just like the questions) How do I do that? Following is my code snippet.This is how it is looking on the page.
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<input type="radio" name="cig-stat" style="color:white" value="0" id="never-smoke" required>Never Smoked Cigarettes<br>
<input type="radio" name="cig-stat" style="color:white" value="1" id="curr-smoker">Current Cigarette Smoker<br>
<input type="radio" name="cig-stat" style="color:white" value="2" id="former-smoker">Former Cigarette Smoker<br>
<hr>
You need to wrap those input elements in label tags (which also contain the texts for those respective radio buttons) and apply the styling to those.
BTW: In general it's better to have an external stylesheet for that purpose instead of using inline styles - among other things you avoid havin to repeat the same styles over and over when you simply can apply them to a particular HTML tag or a class.
body {
background: #555;
}
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="0" id="never-smoke" required>Never Smoked Cigarettes</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="1" id="curr-smoker">Current Cigarette Smoker</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="2" id="former-smoker">Former Cigarette Smoker</label><br>
<hr>
First, I'd set up your markup like this:
<fieldset>
<legend>Cigarette smoking status</legend>
<div>
<input type="radio" name="cig-stat" value="0" id="never-smoke" required />
<label for="never-smoke">Never Smoked Cigarettes</label>
</div>
<div>
<input type="radio" name="cig-stat" value="1" id="curr-smoker" />
<label for="curr-smoker">Current Cigarette Smoker</label>
</div>
<div>
<input type="radio" name="cig-stat" value="2" id="former-smoker" />
<label for="former-smoker">Former Cigarette Smoker</label>
</div>
</fieldset>
Then you can style the <legend> and <label> elements to color: white. I'd split the CSS up from the markup if possible. If not, you can keep them inline.
Here's a fiddle of the above in action:
https://jsfiddle.net/1k3gte76/
If you don't like the white border around the <fieldset> element then just add a border: none rule to that element.
I'm trying to give label after button,but the button is not appearing.
Is is working in fiddle but not in my local code.
Please solve the issue.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;width:100px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Simple solution.. Remove the width:100px;from the label or give it more pixels...
The problem is, that both elements (the text and the radio button) don't fit together inside a 100px element.. So by deleting it or making it wider, they will fit together.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Keep input field outside of the label tag,
Try following code,
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left;">
Default Template
</label>
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</span>
</div>
I have some radio buttons and i would like them to be checked after i click their label.
this is my code before it has been rendered.
div class="btn-group-vertical max-width-100 btn-group-for-partial row col-xs-12" data-toggle="buttons">
#foreach (var x in #Model.dwom.Options)
{
<label for="#x"><input type="radio" name="elu.Answer" id="#x" value="#x"/>#x</label><br />
}
</div>
this is my code after it has been rendered.
<label for="Poinsettia">
<input type="radio" name="elu.Answer" id="Poinsettia" value="Poinsettia" />Poinsettia</label>
<br />
<label for="Mistletoe">
<input type="radio" name="elu.Answer" id="Mistletoe" value="Mistletoe" />Mistletoe</label>
<br />
<label for="Ivy">
<input type="radio" name="elu.Answer" id="Ivy" value="Ivy" />Ivy</label>
<br />
<label for="Holly">
<input type="radio" name="elu.Answer" id="Holly" value="Holly" />Holly</label>
<br />
now on my site it doesn't work for some reason, but in this jsFiddle it does: jsFiddle.
the weird thing is that you can see it being clicked, as in it gets that bevel they do before you release the click.
Hopefully someone here can help me in the right direction to get this working again.
Okay nevermind i was an idiot.
the solution was the data-toggle that my outside div had, it shouldn't have buttons inside it.
I am doing some work and have a form which I want to look like a list (think <ul> format, just without the bullets).
However, right now all the inputs are inline with each other:
Item 1 Item 2 Item 3 etc
I want it to look like:
Item 1
Item 2
Item 3
etc
Code:
<form action = "display.php" method = "post">
<h1>My form</h1>
<input type="checkbox" name="movie[]" value="action" />
<label for="male">action</label>
<br><br>
<input type="checkbox" name="movie[]" value="adv" />
<label for="male">adv</label>
<br><br>
<h1>My form</h1>
<input type="checkbox" name="movie[]" value="com" />
<label for="male">com</label>
<br><br>
<input type="checkbox" name="movie[]" value="rom" />
<label for="male">rom</label>
<br><hr>
<input type="submit" id="submitbutton" name="search" value="Submit">
</form>
I was also wondering if I could move the submit button and put it at the bottom of the page, so the form was on the top half of the page and then I wanted to move the button in the middle, how that would be possible? Right now the form is in a perfect position, but I would like to move the button so it's on the bottom half of the page in the middle.
Thanks again for the help.
TL:DR; http://codepen.io/anon/pen/YqQvoE (here is the code you need)
Long(er) explanation:
I would recommend just putting <br /> tags between your lines. There are several ways to go about it, but that is the easiest way.
As for the button being centered at the bottom, just apply the following CSS to it (and make sure to set the id of the button accordingly):
#submitbutton {
display:block;
margin:auto;
}
(also, your <form> tag needs to be closed)
By the way, as a best practice issue, make sure the for="" for each <label> is different. It should correspond to the name="" of the label's associated <input>.
You need to close your form as well as your div. Also, surround the button in its own special span or div that has absolute positioning. Check out this example:
<form action = "display.php" method = "post">
<input type="checkbox" name="movie[]" value="action" />
<label for="male">action</label>
<input type="checkbox" name="movie[]" value="adv" />
<label for="male">adv</label>
<input type="checkbox" name="movie[]" value="com" />
<label for="male">com</label>
<input type="checkbox" name="movie[]" value="rom" />
<label for="male">rom</label>
<span style="position: absolute; bottom: 0px; right: 0px; left: 0px; text-align: center;">
<input type="submit" name="search" value="Submit">
</span>
</form>
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.