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.checkboxlabel {
    padding-left:0;
    padding-right:4em;
}

.ui.checkboxinput,
.ui.toggle.checkboxlabel:before {
    left:auto;
    right:0;
}

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

.ui.toggle.checkboxinput: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><labelfor="A_ID">select A</label></td><td><divclass="ui checkbox"><inputid="A_ID"type="checkbox"><labelfor="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

.customlabel {
    float: left;
    margin: 05px0;
}

Share