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
Related
I'm having trouble getting checkboxes to center align using Materilize CSS.
<div class="center-align">
<h5>Select Value </h5>
<form action="#" >
<p class="center-align">
<input class="filled-in" name="group1" type="checkbox" id="1">
<label for="1" class="teal-text text-lighten-2" >First</label>
</p>
<p class="center-align">
<input class="filled-in"name="group1" type="checkbox" id="2">
<label for="2" class="teal-text text-lighten-2">Second</label><span></span>
</p>
</form>
This results in the checkboxes being aligned in the center, but offset from each other. If the labels are exactly the same, they match.
I've tried adding the center-align class to the <div> , <form>, <input> and the <p> but nothing is working as I'd expect.
Was able to acheive desired result by adding this css
<style>
label{
left: 50%;
}
</style>
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/
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />
<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 have multiple image of 100x100. I ask the user to choose one of them by putting an radio button before each of them.
This is the code :
<div>
<input type="radio" name="pic" value="1"/><img src="pic01.jpg"/><br/>
<input type="radio" name="pic" value="2"/><img src="pic02.jpg"/><br/>
....
and so on... But the problem is that the radio button renders at the bottom of the line and I want to make it come in the vertical middle of the image. I have tried style="vertical-align:middle" and it does not work.
Any ideas?
When applied to inline elements, vertical-align specifies where to align a certain part of the child element to a corresponding part of the parent's line box. For example, "middle" roughly aligns the middle parts of each. If you want to align two siblings, you'll need to apply the same vertical alignment to both, otherwise the element will align to the parent's baseline.
<style type="text/css">
input[type="radio"], input[type="radio"]+label img {
vertical-align: middle;
}
</style>
<ul>
<li>
<input type="radio" name="pic" id="pic1" value="1" />
<label for="pic1"><img src="pic1.jpg" alt="pic 1" /></label>
</li>
<li>
<input type="radio" name="pic" id="pic2" value="2" />
<label for="pic2"><img src="pic2.jpg" alt="pic 2" /></label>
</li>
</ul>
<div style="width=define_your_image_container_width_here">
<div style="float:left;vertical-align:middle"><input type="radio" name="pic" value="1"/></div>
<div style="float:right;"><img src="pic01.jpg"/></div>
</div>
In addition to the previous answer, the radio button must have the same actual height as the image for it to work. By actual I mean it must match height, padding, margin and border.