1

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.

<div class="ui toggle checkbox">
  <input id="privacy" type="checkbox" checked="checked">
  <label for="privacy">Public</label>
</div>

Semantic UI checkboxes docs are here: http://semantic-ui.com/modules/checkbox.html#/definition

If I switch the input and label in the html, the toggle function stops working. I can't even seem to position the elements relatively... is there some easy class I can add or something that will enable the input and label to have switched positioning while still maintaining the functionality of the red-green toggle?

Thanks..

Update: I'm working on a fiddle here: this INCLUDES the semantic ui css and js.

http://jsfiddle.net/3xkrx/30/

bhdrk
  • 3,415
  • 26
  • 20
Peege151
  • 1,562
  • 2
  • 21
  • 45

3 Answers3

6

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.

dork
  • 4,396
  • 2
  • 28
  • 56
  • Thanks for helping. I pasted this into my fiddle with no luck, I'm going to tweak it a bit.. Do you have it working? – Peege151 Aug 20 '14 at 06:06
  • 1
    How do you even know how to do this?! Can you write a book so I can read it? all these before and after css rules boggle me. THANKYOU – Peege151 Aug 20 '14 at 06:25
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/

Eagllus
  • 437
  • 3
  • 8
1

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;
}
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • This was the first thing I tried, unfortunately this doesn't work. It may work in a fiddle, but semantic UI has more CSS in the 'ui toggle checkbox' that inhibits this form working. Thanks for your submission though. – Peege151 Aug 20 '14 at 05:45