Semantic UI, Positioning Labels

I'm using a checkbox in Semantic UI. I would like to switch the position of the label and the input but it's proving to be kind of a pain. I am using the toggle checkbox.

Solution 1:

This is what you can do:

.ui.toggle.checkbox label {
    padding-left:0;
    padding-right:4em;
}

.ui.checkbox input,
.ui.toggle.checkbox label:before {
    left:auto;
    right:0;
}

.ui.toggle.checkbox label:after {
    left:auto;
    right:1.75em;
    transition:background 0.3s ease 0s, right 0.3s ease 0s;
}

.ui.toggle.checkbox input:checked + label:after {
    left:auto;
    right:0.5em;
    transition:background 0.3s ease 0s, right 0.3s ease 0s;
}

The checkbox is basically just styled to look like that. The actual <input type="checkbox" /> is transparent.

Solution 2:

Not sure if you still have this problem but I found a sort of solution. in my case I have a table that looks like

<table>
  <tr>
    <td><label for="A_ID">select A</label></td>
    <td>
        <div class="ui checkbox">
          <input id="A_ID" type="checkbox">
          <label for="A_ID"></label>
        </div>
    </td>
  </tr>
</table>

Because I have a label behind it the code it works (without Javascript).

little example http://jsfiddle.net/3xkrx/162/

Solution 3:

So you want the label on the left? Use a float on the label.

I have placed the class - .custom - on the div, but you could apply to an existing class :)

Have an example!

HTML

<div class="ui toggle checkbox custom">

CSS

.custom label {
    float: left;
    margin: 0 5px 0;
}

Share