CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapcheckboxtwitter-bootstrap-3
krystan honour
krystan honour

Reputation: 6783

How to get checkbox label to be on the left of checkbox

I have the following code:

   <div class=checkbox>
       <label><input type="checkbox" id="foo">My Label</label>
   </div>

   <div class=checkbox>
       <label><input type="checkbox" id="bar">Another Longer</label>
   </div>

   <div class=checkbox>
       <label><input type="checkbox" id="baz">Less than lng</label>
   </div>

this will render in bootstrap 3 with the label on the right hand side. which is fine normally, but I need it to be on the right hand side with the checkbox on the left.

So it looks like below, the labels should be right justified also.

      My Label []
Another longer []
 Less than lng []

Upvotes: 0

Views: 19702

Answers (3)

Nik Drosakis
Nik Drosakis

Reputation: 2348

label{float:left}
 <div class=checkbox>
       <input type="checkbox" id="foo"><label>My Label</label>
   </div>

   <div class=checkbox>
       <input type="checkbox" id="bar"><label>Another Longer</label>
   </div>

   <div class=checkbox>
       <input type="checkbox" id="baz"><label>Less than lng</label>
   </div>

for perfect alignment, even if many designers won't like it, I would do this

<table><tr>
       <td><label>My Label</label></td>
         <td><input type="checkbox" id="foo"></td>
</tr><tr>
       <td><label>Another Longer</label></td>
         <td><input type="checkbox" id="bar"></td>
</tr><tr>
       <td><label>Less than lng</label></td>
         <td><input type="checkbox" id="baz"></td>
</tr></table>

Upvotes: 2

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

If you can put your checkbox divs in a container, you don't have to worry about setting a width:

.container {
  display: inline-block;
  white-space: nowrap;
}

.checkbox {
  border: 1px solid transparent;
  text-align: right;
}

.checkbox input {
  float: right;
}

The border is needed for IE and Chrome. (Note that I made it transparent.) Stumbled across that by accident and will try to figure out why it's needed.

white-space: nowrap is needed for IE only.

Working Fiddle

Update

We need to override some of Bootstrap's defaults.

container is a Bootstrap class, so I've changed to cbcontainer.

Bootstrap makes the inputs position: absolute, so I've changed to position: relative !important.

Also, a margin is now needed for the input.

Finally, the border is no longer needed for IE and Chrome, and white-space is no longer needed for IE.

Updated CSS:

.cbcontainer {
  display: inline-block;
}

.checkbox {
  text-align: right;
}

.checkbox input {
  float: right;
  position: relative !important;
  margin: 5px !important;
}

New Fiddle

Upvotes: 3

Mateusz Mania
Mateusz Mania

Reputation: 849

Just try set float to left, for input inside .checkbox.

For smooth alignement, You will set width of .checkbox and label.

To align text of label, to right You must set text-align to right.
Additional You must set margin-left for input for space between label text and checkbox input.

JSFiddle

enter image description here

CSS:

.checkbox, .checkbox label {
    width: 200px;
}

.checkbox label {
    text-align: right;
    float: left;
}
.checkbox input {
    margin-left: 16px;
    float: right;
}

Upvotes: 2

Related Questions