This code is expected to show 2 radio buttons group where they "the group" is shown horizontally as well as "the button to the left of the caption" but I am getting the first effect but now how can I get it so that the button icon is located to the left of their corresponding caption? Thanks
edit
I am not using bootstrap up the html chain.
.list-item {
margin: 1em 1em;
}
<div class="list-item">
{{> sub}}
</div>
<template name="sub">
<label>
<input type="radio" name="mygroup" />
My caption 1
</label>
<label>
<input type="radio" name="mygroup" />
My caption 2
</label>
</template>
Like this maybe?
.list-item {
margin: 1em 1em;
}
Vertical <br>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 1
</label>
</div>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 2
</label>
</div>
Horizontal <br>
<div class="list-item">
<label>
<input type="radio" name="mygroup" /> My caption 1
</label>
<label>
<input type="radio" name="mygroup" /> My caption 2
</label>
</div>
You can set the input to position:absolute; and set a padding-left on the label, it works wonders :)
Edit: you might have to set position relative on the labels.
Related
I want to put a label for a radio input outside the div where the input is. Something like this
<div class="externalDiv">
<div class="internalDiv">
<input type="radio" id="someId"/>
</div>
<label for="someId"> Label content </label>
</div>
But it's not working this way unless I put the label inside the internal div. How can I make this work?
Edit: What I mean by not working is that when I click on label, the radio button does not get checked.
Try this code.
p,
label {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
<fieldset>
<legend>Select a maintenance drone:</legend>
<div>
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
</fieldset>
I tried this solution but it didn't work, any advice how it can be achieved?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;">An Individual
</label>
</div>
</div>
JSfiddle
input tag don't have closing tag, second wrap label inside span
and give it a margin
label span{
display:inline-block;
margin-left: 10px;
}
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
</label>
</div>
</div>
Edit: You can just separate the input and label and link them using an 'id' on the input and a 'for' attribute on the label. Then you can style your label to add the spacing.
<input id="company" type="radio" name="optradio" checked="true" /><span ></span><label for="company" class="radio-inline" style="padding-left:15px;"> A Company
</label>
Insted padding-left use margin-right. And don't use closing </input> tag, it is auto closing like <input />
.radio-class {
margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" class="radio-class" />A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" class="radio-class" />An Individual
</label>
</div>
</div>
Taking off from Mr Belugin's idea above. This bit of css will add a right margin to all radio buttons. This solution required no additional class added to the many radio buttons in my form.
It basically adds a 4px right margin to all radio buttons.
input[type=radio] { margin-right:4px; }
I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
I'm working on a One Pager website where I have a navigation menu. I'd want to have radio input associated to the clicked a, in order to apply some CSS to the active radio.
As you will see, the CSS is applied when I click on the radio, but not when I click on the link. I know I could do this using JavaScript, but I am trying to avoid growing my code base.
The second section of the snippet is what I'd want to achieve, but with an a tag in the label. The radio will be hidden, so clicking on the radio isn't an acceptable answer. How can I make the a tag and the input tag activate?
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
visibility: hidden;
width:0;
}
<html>
<body>
<div>
<h2>Not working with a tag</h2>
<div>
<input id="a" type="radio" name="menu1" value="a"/>
<label for="a">Input 1</label>
</div>
<div>
<input id="b" type="radio" name="menu1" value="b"/>
<label for="b">Input 2</label>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
</body>
</html>
Right solution is here , try this.
<script type="text/javascript">
$(document).ready(function(){
$('[name=title_format]').click(function() {
$('[name=doc-title]').val('Title changed to '+$(this).val());
});
});
</script>
<style>
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
width:0;
}
</style>
<div>
<h2>Not working with a tag</h2>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"> <label for="title-format-0">Input 1</label>
</a>
</div>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-1" value="1">
<label for="title-format-1">Input 2</label>
</a>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
Here's a working example of the label syntax: https://jsfiddle.net/93c3sscs/
If you're testing on IE11 or your customers use IE (not sure about Edge and other IE versions), you can't rely on labels to activate inputs. IE does not apply clickable functionality to <label><input></label>, and Microsoft put out 2 updates in the second half of 2015 that completely broke my app because of this by positioning the clickable area 5px above my widget sprites.
Trying to get radio buttons, questions and answered centered in the middle of the page any help wud be great here is my code!!
<form action='process.php?id=1' method='post' id='quizForm' id='1' onSubmit='validateForm()' name='myForm'>
<ol>
<li>
<h3>1 x 1 =</h3>
<div>
<input type='radio' name='answerOne' id='answerOne' value='A' />
<label for='answerOneA'>A)1</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='B' />
<label for='answerOneB'>B)2</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='C' />
<label for='answerOneC'>C)3</label>
</div>
</li>
<li>
<h3>1 x 6 =</h3>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='A' />
<label for='answerTwoA'>A)5</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='B' />
<label for='answerTwoB'>B)6</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='C' />
<label for='answerTwoC'>C)4</label>
</div>
</li>
<li>
<h3>2 x 8 =</h3>
<div>
<input type='radio' name='answerThree' id='answerThree' value='A' />
<label for='answerThreeA'>A)14</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='B' />
<label for='answerThreeB'>B)12</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='C' />
<label for='answerThreeC'>C)16</label>
</div>
</li>
</ol>
<input type="submit" />
</form>
I have created basic fiddle for you with an example solution, check if that is what you need.
http://jsfiddle.net/bhd2C/
I have simply put your form into a div for which I have created simple css class:
.content {
width:100%
margin:0 auto;
text-align:center;
}
<form style='text-align:center' action='process.php?id=1' method='post' id='quizForm' id='1' onSubmit='validateForm()' name='myForm'>
<ol style='list-style-position:inside;'>
Changing first two lines would work. Setting text-align property to 'center' makes what is inside centered in the container. "list-style-position:inside;" code makes list styles( 1., 2. etc.) appear in normal flow so that they are also centered.
Note: text-align centers your content in the middle of container. That's, your container should be 100% width if you want to locate your content in the middle of the page.
Also note that when using css, internal or external style would be better instead of inline style( used in the code above) if you use it in other forms and lists.
Result
Ways to insert css
How to create centered ordered list with HTML/CSS?