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.
Related
I have three buttons the user can press. By default, I have the first one already pressed because I don't want the user to submit the form without pressing anything. The problem is that in mobile phones, if I press another button that hasn't the attribute of 'checked', it gets pressed normally but the one checked by default is not going away. This works fine in computer but not in mobiles. Any ideas?
This is my code:
<div class="control radio-toolbar" id="duration-picker">
<div class="control radio-toolbar container fm-radios">
<div style="display: inline-block" class="fm-radio dib">
<input checked class="date-button" type="radio" value="1" name="options" id="letter_pick_date_1" />
<label for="letter_pick_date_1">1 year</label>
</div>
<div style="display: inline-block" class="fm-radio dib">
<input class="date-button" type="radio" value="3" name="options" id="letter_pick_date_3" />
<label for="letter_pick_date_3">3 years</label>
<br><br>
</div>
<div style="display: inline-block" class="fm-radio dib">
<input class="date-button" type="radio" value="5" name="options" id="letter_pick_date_5" />
<label for="letter_pick_date_5">5 years</label>
</div>
</div>
</div>
Also one is above the other one and don't know how to solve this. I displayed them inline but wont work
EDIT: Another thing i could do is to have no default checked inputs. But how do I make this required so that nobody submits the form without pressing the buttons?
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 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 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. :)
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.