I use the framework Boostrap and I would like to control the radio buttons alignement.
All the examples I saw to display a responsive list of radio buttons do not manage the alignment. Either they were using labels with same size or a fixed width that keep the alignment but nothing really responsive.
I've tried to use the solution below but with
http://jsfiddle.net/rm7n73ep/`
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
Radio button's label 2
Does somebody know how to combine the property for the responsive behavior and for a correct alignment of labels and radio button?
Thanks a lot for your answer!
Add the following class
label{
display: block;
}
Check if this helps :
<div class="form-group">
<label class="col-md-5"> Your label </label>
<div class="col-md-7">
<div class="col-md-6">
<input type="radio" name="name1" value="0" checked/>
<label for="name1">Input 1</label>
<input type="radio" name="name2" value="1" />
<label for="name2">Input2</label>
</div>
</div>
</div>
Related
I have the following html code, which contains input radio and label for it, when I turn windows narration (voiceover) on, it highlights only radio button:
But, I want input + label to be highlighted together:
is there any way to achieve this?
Here's my code:
<div>
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
I overcame the issue by changing markup a bit. I added wrapper div:
<div class="radio-wrapper">
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
And made radio button width & height 100% and display: inline-block;
Now it's acting as it should.
I have some custom radio buttons. The final option should be a radio button with an input field.
As you can see, in de Codepen example, the radio button does not align vertically center with the input field.
I have tried everything from calculating top, to display flex.
Codepen: https://codepen.io/monsmado/pen/RwarYEG
<form>
<label>Do you have an elevator?</label>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorYes" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorYes">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorNo" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorNo">No</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorOther" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorOther">
<input type="text" class="form-control" name="elevator" placeholder="Other">
</label>
</div>
</form>
Add this CSS in this case
.form-group:nth-child(4) .custom-control-label:after, .form-group:nth-child(4) .custom- control-label:before{
margin-top: 0.5em
}
I send you the solution in you codepen
https://codepen.io/r0binxp/pen/qBZbJaZ
Well, a quick fix for your situation could be overriding the current top value of the custom radio button and set it to 25% (Since the actual height of it is 50% of your input so the 25% will fit it exactly in middle). Also, note that display flex on the parent element won't work as expected because the customized radio exits within the ::before pseudo-element so it won't get the flex attribute.
.custom-control-label[for=monthsOther]::before,
.custom-control-label[for=monthsOther]::after {
top: 25%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<label>How many months?</label>
<div class="custom-control custom-radio">
<input type="radio" id="monthsYes" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsYes">1-2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsNo" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsNo">3-5</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsOther" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsOther">
<input type="text" class="form-control" name="months" placeholder="Other">
</label>
</div>
</form>
NOTE: Keep in mind since the radio button itself and its background on check action is defined in ::before and ::after pseudo-elements you need to override both of them.
This seems like a really hacky way to change the appearance of form elements. The original question is missing any CSS code (which is where all the problems arise) but the linked codepen does show the root causes. It will be very difficult to properly align elements that are absolutely positioned, especially when you start taking left-to-right or larger font sizes into account. Additionally, creating the visual representation of a radio button using a ::before on inside the label is a recipe for frustration and ultimately a bad solution.
The proper solution is probably using vertical-align: middle or vertical-align: baseline on both the radio and the label. but those will have no effect while the elements are absolutely positioned.
I have the following layout:
When the screen size is changed I want the text field to stay always 'attached' to the last radio button having 1em distance between them. The problem is that the radio button group is one div and the text field is another. Is there a way of specifying css rules on the text field only to achieve such positioning? If not, what could be done otherwise? I am using semantic-ui-react and due to the nature of the project structure can only position the radio button group and the textfield in two different Form.Groups'.
You can use display the flex property for this design. It will always align at the bottom from the last radio button. You just need to add to lines in CSS. Here is the pen: https://codepen.io/Mak0619/pen/bPYXyg
HTML:
<div class="radio-button-grop">
<div class="bd-example">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="">
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="">
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
<div class="text-field">
<input type="text">
</div>
</div>
CSS:
.radio-button-grop{
display: flex;
align-items: flex-end;
}
.text-field{
margin-left: 1em;
}
I have been trying to align the position the radio buttons below the start of the questions but nothing seems to be working for me.
Here is my code:
<div class="form-row" [style.display]="this.Form.value.joiningAs == '2' || this.Form.value.joiningAs == '3' ? 'block' : 'none'">
<div class="col-md-12 mb-3">
<label for="hasProfile">
Has your company created their profile on our platform?
</label>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="radio" name="hasCompanyProfile" value="1" formControlName="hasCompanyProfile"
[(ngModel)]="Form.value.hasCompanyProfile">
Yes
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="radio" name="hasCompanyProfile" value="2" formControlName="hasCompanyProfile"
[(ngModel)]="Form.value.hasCompanyProfile">
No
</label>
</div>
</div>
</div>
Any help will be very appreciated. I've been spending too much time on this.
One way to do it is set "margin-left: -15px" (align the number manually so it fits your page) on the "form-check" class in CSS. Another way would be creating a 'div' element that will hold both the check-boxes and text. If that does not work then check you CSS probably "form-check" has some margin or padding properties
So you want to align the radio buttons left with the text?
.form-check-label > input {
margin-left: 0;
}
I hope that solves your problem
In your CSS I would just set:
.radio {
margin-left: 0;
}
I have a group of radio buttons and a submit button. I wish to place them side by side, the group of radio buttons on the left, and the submit button aligned proportionately on the right. What is the right way to do this using twitter bootstrap?
Currently, no matter what I do, I am getting the button below the radio button group.
When you use form-horizontalyou can use radio-inline for the radio buttons..
<form class="form-horizontal">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Radio 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Radio 2
</label>
<label> </label>
<button type="submit" class="btn btn-default">Submit</button>
</div>
http://bootply.com/YEfKIS6Lqa
Assuming your radio buttons and submit button are enclosed in a form tag with proper bootstrap markup, bootstrap basically provides two different form layouts.
form-horizontal
form-inline
The form layout that's ideal for this behaviour is form-inline. All you have to do is change your form css class from the default value to form-inline and override the display attribute of the .form-inline .radio class.
Sample HTML
<form class="form-inline">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
CSS
.form-inline .radio {
display: block;
}
Here's a working example