I want single space between the text and radio button. To achieve this I tried the css class answerBottomYesNo by adding margin-left: 7px . for some reason it did not work.
Below is code snippet
<div class="questionRow odd">
<div class="question">
Ear Aches?
</div>
<div class="answers">
<label for="rbEarAches1"><span class="answerBottomYesNo" ><input type="radio" id="rbEarAches1" name="EarAches" value="true" data-bind="checked: EarAches">Yes</span></label>
<label for="rbEarAches0"><span class="answerBottomYesNo"><input type="radio" id="rbEarAches0" name="EarAches" value="false" data-bind="checked: EarAches">No</span></label>
</div>
</div>
What should I do to give a space between the radio button and text. I could have done nbsp but I really want this to reside in the CSS file. Help appreciated!
Instead of span, add margin to input type=radio inside the span like this:
.answerBottomYesNo input[type="radio"]{
margin-right:20px;
}
See the working fiddle: https://jsfiddle.net/4ageousp/
Related
I have an issue. I am trying to create a single line that contains a radio, a label, and a clickable icon and I want all of these elements to be inline. I want it to be set up like:
Radio Label Icon
in that order. My code HTML looks like this:
<div class="wrapper class>
<div class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</div>
</div>
I have tried to place the icon outside of the label class, but it does not display inline and I have also tried to use display:inline; in my CSS code, to no avail. I am trying to just separate the icon and the label, but I cannot seem to get this to work.
Any and all help would be greatly appreciated!
Thank you in advance!
Change the div class="radio" to an span:
<div class="wrapper">
<span class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</span>
</div>
https://jsfiddle.net/qq3nLwp3/
And improved with some css:
div.wrapper input, div.wrapper i { {
vertical-align: middle;
}
I'm designing a footer on a HTML webpage with a radio-selection form on it. I have some buttons inside the footers div, centered using <center>. Without the form on it, it works 100%. I can't get the form to display next to the other buttons, without using float: right; in the stylesheet. When I use float, it is inconsistently dynamic with the rest of the buttons in the div. I've tried setting fixed heights, but I want it to be dynamic. So how can I get the form to display next the the links, in the same way that the links display next to each other?
JSFiddle: https://jsfiddle.net/o78s2s18/
Diagram:
You could put both groups of elements inside their own <div> and float them both to the left.
<div style="float:left;">
<a id="BtnStyle" href="example.com">10 Views</a>
<a id="BtnStyle" href="http://mirum.weebly.com/">About</a>
<a id="BtnStyle" href="http://SD-Storage.weebly.com/#MirumFooter">SD-Storage</a>
</div>
<div style="float:left">
<form action="#" width="200px" class="ThemeSelector">
<input name="group1" type="radio" id="test1" class="red" />
<label for="test1">Test 1</label>
<br>
<input name="group1" type="radio" id="test2" class="red" />
<label for="test2">Test 2</label>
</form>
</div>
Here's an example
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
Hello I have a layout similar to the one above. I have some other things in the php file, but they are irrelevant. For example every new 5th element causes a new line (br), which will make sense when you see the pictures.
Here is an image representation of the outcome:
This is what I need :
How can I possibly do this, I will appreciate any idea. Cheers.
Note: Span tags contain the text next to the radio buttons.
iyi akşamlar :) you can remove div's, create class inside radio buttons and put them altogether into container for each row.
LIVE DEMO HERE
<div class="container">
<input type="radio" class="radyo">
<div class="text">a2</div>
<input type="radio"class="radyo">
<div class="text">a3</div>
<input type="radio"class="radyo">
<div class="text">a4</div>
<input type="radio"class="radyo">
<div class="text">a5</div>
</div>
<div class="container">
<input type="radio"class="radyo">
<div class="text">beyler ben geldim</div>
<input type="radio"class="radyo">
<div class="text">tamam</div>
</div>
First of all, avoid using inline styles.
If you want the result in the second image, simply define width for each element instead of margin.
<div style="display:inline-block; margin-left:10%; width:15%;">
or set the margin-left and width as you see fit.
I'd suggest a nested div pattern, where you can utilize precised columns without margin/padding and insert a div that hold the margin/padding as desired. Then push your checkboxes into each nested div. I'd also suggest using a <label> over <span> (as it is a span with some extra properties) (MDN Label)
.cols {float:left;width:25%} //Set columns up, without margin/padding so they align as expected in 4.
.col {margin-left:10%;} // Inner column with margin/padding etc.
<div class='cols'>
<div class='col'>
<input type='radio' name='radio1' /><label for='radio1'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio2' /><label for='radio2'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio3' /><label for='radio3'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio4' /><label for='radio4'></label>
</div>
</div>
If you have the width of your outer container, it would be easier for you to align fixed-sized divs inside it. For example if we have a div with width: 300px;, and we want 3 radio boxes on a row, we specify width: 100px; for them. Add float: left; and it should work out well for you.
Here's a live demo.
If fixed width doesn't suit you, there are many other approaches to do this, I can share if this doesn't work for you.
I'm struggling creating a CSS style.
This is what I've got: http://jsfiddle.net/WhNRK/26/
It was designed for a label, but now I'm trying to modifying for something like this:
<input type='radio' name='mcq' id='radio-choice-1' value='1' />
<div class='container'>
<label for="radio-choice-1" onclick="">Choice 1</label>
</div>
So if I did this, I broke up the design. Someone can help a little bit? This is a radiobutton style for an iPad.
Change the CSS selector to match your new markup:
#question input:checked + div > label {
Demo
You just remove #question input from your css and make the name of #question label as #question label.
Change the code as follows:
<div id='question'><form name='mcForm'>
<div class='container'>
<input type='radio' name='mcq' id='radio-choice-1' value='1' />
<label for="radio-choice-1" onclick="">Choice 1</label>
</div>
</div>
How can I simply move the text so it does not continue below the <input> field, without making a <div> wrap the text?
currently, my HTML is as:
<div class="answer">
<div class="control-group">
<label class="radio">
<input type="radio" id="a_0" name="a" value="86692726-ff5a-4f1f-b2f4-51a98e03eba0">
Designer Brille Mode – Brille forum på Trendsales</label>
</div>
<div class="control-group">
<label class="radio">
<input type="radio" id="a_1" name="a" value="98f07484-5e65-47fc-bb46-b9a59125bdd2">
Design by Me – unika og hjemmelavede annoncer på Trendsales</label>
</div>
<div class="control-group">
<label class="radio">
<input type="radio" id="a_2" name="a" value="248e7343-ddf7-4d61-94fa-e5425fa5f54b">
Dansk Børne Mode på Trendsales</label>
</div>
</div>
And I'm using Bootstrap CSS Framework, a Live example can be found in JsBin.
First step: don't wrap the input with label.
Second step: change the default display for input & label to block, set width and float them.
So the CSS will be something like:
.answer {width:200px;overflow:hidden;}
input,label {display:block;float:left}
input {clear:left;width:16px;}
label {width:184px;}
Demo: http://jsfiddle.net/6v8Dc/
instead of regular space or display: inline-block;
Demo
Hi now used to white-space nowrap as like this
.control-group {
white-space: nowrap;
}
Demo