Radio buttons are showing like the attached image. How to align the Label and the button.
input[type="radio"] {
width: 18px;
min-width: auto;
display: inline-block;
}
<label><input type="radio" name="myRadios1" id="myRadios1" value="Yes" ONCLICK="show_info_block(this.value)" />Yes</label>
<label><input type="radio" name="myRadios2" id="myRadios2" value="No" ONCLICK="show_info_block(this.value)" />No</label>
I have 2 solutions but i think one of them is better:
first Dont wrap you <input> in <label> and do this instead:
{label}
then for css :
.label-container {
display: flex;
align-items: center;
}
input[type='radio'] {
margin: auto;
}
you can use display flex and align-items: center for each label with your own code
but I think it's not clean at all.
Related
Hello im trying to allign vertically text next to my radio-button, but its getting crashed.
.radio {
cursor: pointer;
display: inline-flex;
}
.cui-a-radio-button__input {
display: none;
}
.cui-a-radio-button__input:disabled + .cui-a-radio-button-style {
opacity: 0.3;
}
.cui-a-radio-button-style {
border-radius: 50%;
margin-right: 10px;
box-sizing: border-box;
padding: 2px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
}
<label for="Radio3" class="radio">
<input type="radio" name="RadioField" id="Radio3" class="cui-a-radio-button__input" disabled>
<div class="cui-a-radio-button-style">disabled</div>
</label>
I have tried to add "vertical allign: top" to label but id does not work.
Result i have:
Try adding align-items:center on your radio class!
for displaying a text beside radio button, just place the text inside your input tag. label tag is for another purpose.
<input type="radio" disabled> disabled </input>
How to put the checkbox and label in one line?
<style>
#supports (zoom:2) {
input[type=checkbox]{
zoom: 2;
}
}
#supports not (zoom:2) {
input[type=checkbox]{
transform: scale(2);
margin: 15px;
}
}
label{
/* fix vertical align issues */
display: inline-block;
vertical-align: top;
margin-top: 10px;
color:black;
}
</style>
<input type="checkbox" name="check_gdpr" id="check_gdpr" checked />
<label for="cc">Inform me by e-mail</label>
Wrap the input in the label:
<label><input type="checkbox" name="check_gdpr" id="check_gdpr" checked>Inform me by e-mail</label>
just put your checkbox and label in span
example<span class="get-inline"><lable>Inform me by e-mail</lable></span>
<span class="get-inline"><input type="checkbox" name="check_gdpr" id="check_gdpr" checked /> </span>
now add css like this:
.get-inline{display:inline-block;}
i hope it will work
Update
vertical-align: top
to
vertical-align: middle
in your CSS for label and it should work just fine.
I am trying to edit the way radio buttons appear in CSS and trying to do it with the label encompassing the button and not using the label for function.
In other words, I don't want to use this:
<input type="radio" name="rb" id="rb2" />
<label for="rb2">Hello</label>
I want to use this:
<label><input type="radio" name="rb" />Hello</label>
The reason for this is that the HTML is dynamically generated and I cannot create an id or other field in the input. When I add the css to modify the button/text it doesn't work because it requires the label to be on the text only and "for" to be used. Here is the CSS:
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
font-family: 'Lato', sans-serif;
font-size:18px;
border:2px
solid #ccc;
overflow-y: scroll;
resize: both;
}
.container input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
.container input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
.container input[type=radio]:checked ~ label{
color: #0DFF92;
}
It works if I put the
<div class="container>
<input type="radio" name="rb" value="Hello" id=rb2"/>
<label for="rb2">Hello</label>
<input type="radio" name="rb" value="Goodbye" id="rb3"/>
<label for="rb3">Goodbye</label>
</div>
But not with
<div class="container>
<label> <input type="radio" name="rb" value="Hello">Hello</label>
<label><input type="radio" name="rb" value="Goodbye">Goodbye</label>
</div>
Any suggestions? Thank you so much!
You would have to use javascript. You can't navigate back up the dom tree in css, so since you want the input to be inside the label and the css to affect the label based on the the input, you'd have to use js to detect the change and apply the styling to its parent.
This is my jsFiddle here
HTML Block:
<span class="areas">
<label><input type="checkbox" />Item <br/> 1</label>
<label><input type="checkbox" />Item 2</label>
<label><input type="checkbox" />Item 3</label>
<label><input type="checkbox" />Item 4</label>
<label><input type="checkbox" />Item 5</label>
<label><input type="checkbox" />Item 6</label>
<label><input type="checkbox" />Item 7</label>
</span>
</div>
CSS:
div.arealist { display: block; clear: both; margin-top: 40px; }
div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }
div.arealist>span.group { width: 75px; border: 1px solid #d0d0d0; }
div.arealist>span.areas { width: 300px; border: 1px solid #d0d0d0; }
This is how the elements are displayed when we enter a <br/> tag within an element :
I know that the <br/> tag just does what it needs to do so by introducing a line break here.
But my problem is how to display something like this ?
Meaning, Items are still displayed in original order; But notice Item 1. It just stacks itself and auto-adjusts whenever a <br/> is present.
I tried defining some divs and spans but not satisfied with clumsy code. What is the best way of doing this ?
I'm using angularjs, html5 in my project. Are there any inbuilt way of doing this ?
you can move label after checkbox , assign id for checkbox and bind it to label.
<input id="chk" type="checkbox" />
<label for="chk" style="vertical-align:middle; text-align:center;">Item <br/> 1</label>
Demo here.
There is an alternative of using CSS3 flexbox, which actually gets quite close to what you want. Contrary to popular belief, flexbox is actually rather widely supported: unless you want to extend support to IE9 and below. You need to apply flexbox on two levels though:
On the span.areas parent, because you want to distribute the individual <label> elements
Within each <label> element, as you want to position the checkbox such that it is vertically centered
There are of course other hacks such as display: table-cell, but I am generally in favour of flexbox due to its flexibility (no pun intended).
Here is a proof-of-concept example based on your code:
div.arealist {
display: block;
clear: both;
margin-top: 40px;
}
/* span.areas to have flexbox,
so we can distribute the label groups
*/
div.arealist>span {
display: flex;
flex-wrap: wrap;
padding: 25px;
}
/* Each label to have flexbox as well,
so we can center the checkbox vertically
*/
div.arealist>span label {
display: flex;
align-items: center;
text-align: center;
}
div.arealist>span.areas {
width: 300px;
border: 1px solid #d0d0d0;
}
<div class="arealist">
<span class="areas">
<label><input type="checkbox" />Item <br/> 1</label>
<label><input type="checkbox" />Item 2</label>
<label><input type="checkbox" />Item 3</label>
<label><input type="checkbox" />Item 4</label>
<label><input type="checkbox" />Item 5</label>
<label><input type="checkbox" />Item 6</label>
<label><input type="checkbox" />Item 7</label>
</span>
</div>
You can use text-align:center to the label element.
div.arealist>span label { display: inline-block; text-align:center; }
Use this
div.arealist>span label {
display: inline-block;
text-align: center;
float: left;
height: 30px;
padding: 5px;
}
Add text-align: center as below
div.arealist>span label { display: inline-block;text-align:center }
Demo here
I tried to add margin-left to the span in percentage, But the result is not as I want. It works only if I change the property display added to the label by bootstrap to block,
Can anyone explain this behavior to me, and offer a solution?
Thanks in advance.
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
.field-description {
margin-left: 20%;
}
<label class="gender-item">
<input type="radio" id="male" class="field-checkbox" name="gender" value="">
<span class="field-description">male</span>
</label>
Percentage values relative to an inline-block that does not have an explicitly defined dimenion may cause weird problems, either refrain from using the percentage unit, or you could force the content to remain in one line with white-space: nowrap;
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
white-space: nowrap;
}
.field-description {
margin-left: 20%;
}
<label class="gender-item">
<input type="radio" id="male" class="field-checkbox" name="gender" value="">
<span class="field-description">male</span>
</label>
I Guess you want span to be inline
Check hereClick here