Semantic-ui: Checkbox right floated style support

Created on 19 Mar 2015 · 5Comments · Source: Semantic-Org/Semantic-UI

It'd be great if there was right floated style out of the box for checkbox

        <div class="ui toggle checkbox right floated">
            <input id="active$index" type="checkbox" name="active" ng-model="item.active"/>
            <label for="active$index">Send this header</label>
        </div>

I created my own style:

.ui.toggle.checkbox[class*="right floated"] {
    float: right !important;
    margin-right: 0em !important;
    margin-left: 1em !important;
}

FiChange Declined

Source

geemang2000

👍11

Most helpful comment

I would say that right float for a toggle checkbox is a very common use case. It is especially common in settings menus.

afogelberg on 6 Oct 2017

👍11

All 5 comments

I have no plans to add left/right float to arbitrary elements unless its a very common use case.

jlukic on 19 Mar 2015

I have also been using this functionality a lot in recent projects. It is easy enough to implement yourself as a user anyway. I wouldn't be opposed to seeing it more widely across the board though.

hbthegreat on 14 May 2016

I would say that right float for a toggle checkbox is a very common use case. It is especially common in settings menus.

afogelberg on 6 Oct 2017

👍11

I also need to have the checkbox on the right, I would be super helpful to have a left right option. It possible to move it using styling, we are trying to be as minimal with our style additions as possible as we build our new frontend.