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
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.
Is there a right way to stack radio buttons in Bulma?
Their example places each button on the same line:
<div class="control">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
I'm hoping to get something like this:
Would it be as straight forward as adding <br> tags, or does Bulma have a different better way for maintaining responsiveness?
A <br> tag between labels will work just fine.
While <br> works fine, it does not allow you to configure space between radio options flexible. For example, I can see a space between options in your example image.
In order to achieve that, I've added the following class to my SCSS:
.radio-list {
.radio {
display: block;
& + .radio {
margin-left: 0;
margin-top: .5em;
}
}
}
And now just add radio-list class to your control like this:
<div class="control radio-list">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
Now it looks like this:
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>
In the following code, in both the #option_one_div and #option_two_div, when the contents of the label outgrow one line, the move to the next line, under the radio buttons. What I want is that they should stay under the text of their label in the previous line.
How can I do that?
I tried to enclose the labels in a span tag but that does not help. I can not enclose the labels in div elements because div is a block level element, so the entire label will fall to the next line. What should I do.
JSFiddle here.
<div style="padding:25px; width:400px;">
<div style="background-color:#bf5b5b; ">
<label style="margin-left:25px; margin-right:25px;">Yes</label>
<label style="margin-left:25px; margin-right:25px;">No</label>
<label style="margin-left:25px; margin-right:25px;"></label>
</div>
<div id="option_one_div" style="background-color:#74d4dd;">
<input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="0">
<input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="1">
<label style="margin-left:25px; margin-right:25px;" for="option_one_div">Label of first group of Radio Buttons radio buttons.</label>
</div>
<div id="option_two_div" style="background-color:#36d666;">
<input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="0">
<input style="margin-left:30px; margin-right:30px;" type="radio" name="radio" value="1">
<label style="margin-left:25px; margin-right:25px;" for="option_two_div">Label of second group of Radio Buttons radio buttons.</label>
</div>
</div>
You have a few options:
put the form in a table
use display: table-row and display: table-cell to mimic a table
set widths on your input and label elements and float them inside the div
set widths on your input and label elements and use display: inline-block
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>