I can't get my checkboxes and labels on the same line. The proper bootstrap way is to wrap the checkbox in the label tag like this-
<li>
<label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label>
</li>
But I'm using a CMS and it does not create checkboxes and labels that way, instead they are generated like this-
<li>
<input type="radio">
<label>She did her best to help him.</label>
</li>
The problem with this method is the checkboxes are on a different line to the label. I can set the label to display: inline and this works, but it removes all margins from my form and does not look very nice.
Can anyone help me to find a solution? Here is a js fiddle
You need a little more work in the css... Just created a new fiddle for you.
Here it is.
li > input {
display:inline-block;
width:20px;
}
label { margin-bottom: 25px;
display:inline-block;
width:235px;
}
Use Bootstraps's radio-inline class:
See updated fiddle: https://jsfiddle.net/xs04fqgo/1/
Wrap the content and radio input within a label with class radio-inline, then you can make it on the same line using Bootstrap
Try using bootstrap "checkbox" or "checkbox-inline" class
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
Reference:
https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
Related
I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:
<div className="terms-checkbox">
<input type="checkbox" required />
<p>I accept the Terms and Conditions</p>
</div>
And I'm setting display to be inline-block for terms-checkbox like so:
.terms-checkbox {
display: inline-block;
}
However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?
Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/
edit: fixed indentation.
You must set the terms-checkbox class to input or p tag. Not their parent.
Means your input and p tag must be inline-block
<p><input type="checkbox" required/>I accept the Terms and Conditions</p>
span{
text-align: justify;
}
<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>
I want to align the label for excessive reinforcement checkbox like image2
For example
Thanks in advance
First of all use <label> instead of <span>.
If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.
label{
text-align: justify;
float: left;
line-height: 20px;
}
input{
float:left;
}
<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>
Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.
If you can change the HTML
The best and new method to use checkbox is
<label><input type="checkbox" name="type">Excessive Reinforcement</label>
span {
text-align: justify;
}
.make-table {
display: table-cell;
/* make it behave like table-cell. so that they fall beside each other. */
}
<div class="any-class">
<label><span class="make-table"><input type="checkbox" name="type"></span>
<span class="make-table">Excessive<br> Reinforcement</span>
</label>
</div>
<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
<br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>
Make this simple change!
This is one way of doing it:
<label for="type-1">
<input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>
When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.
I'm wondering what are the best solutions to structure a html form with labels and inputs.
I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.
But i don't think these CSS property were made for something like that..
So what are the others solutions ? Tables ?
Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.
To duplicate what you have, you can do this:
<label for='textbox'>Label</label><input type='text' id='textbox' />
And then this css:
label { display: inline-block; width: 100px; }
This will make the label stay on the same line as in input element but will push it the appropriate distance.
Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.
Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.
My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.
HTML:
<form>
<fieldset>
<ol>
<li>
<label for="input1">Label 1</label>
<input type="text" name="input1" id="input1">
</li>
<li>
<label for="input2">Label 2</label>
<input type="text" name="input2" id="input2">
</li>
<li>
<label for="input3">Label 3</label>
<input type="text" name="input3" id="input3">
</li>
</ol>
<button type="submit">Submit</button>
</fieldset>
</form>
CSS:
li {
clear: left;
margin-bottom: 10px;
}
label {
float: left; /* You could use "display: inline-block;" instead. */
margin-right: 10px;
width: 80px;
}
tables is also a solution.
also , Div with 2 inner divs( left and right)
or 1 div with both elements with float:left with margin-left.
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}
I think this is a pretty simple thing to do, but I don't know how.. thus I'm here. I have written a simple HTML form and need to change the color of the text on a Radio Button. Anyone have any ideas on how this is done?
<input type="radio" id="foo">
<label for="foo"> Blah Blah </label>
Now you select the LABEL via CSS and set it to have a color... You can use classes or relationship, for example:
.radioDiv label { color:blue; }
Assuming the following HTML:
<input type="radio" name="group1" value="Milk" /><span>Milk</span>
Just either add a class to the span, or wrap it in a div and style that using basic CSS:
#somediv span
{
color: red;
}