Search code examples
htmlcsssemantic-ui

Semantic UI: Toggle Checkbox moves on page, floats as if fixed positioning

I'm using Semantic 2.3 and am seeing a very strange issue with .ui.toggle.checkbox in some parts of my application. Other areas the toggles work just fine.

The issue I see is that some of the toggle will float on the page, as if with position: fixed. Has anyone seen this or know what causes this? I've tried removing all the few custom css rules I've set via Chrome dev tools, but can't figure it out. Perhaps it's a bug with Semantic.

I'm not using any fixed positioning on the page. Just pretty vanilla HTML:

      <div class="six wide field">
        <div class="inline field margin-bottom-xs">
          <label>Post-Project Rate Schedule</label>
          <div class="ui mini toggle checkbox">
            <input id="post-project-rate-toggle"
                ng-change="vm.togglePostProjectRate()"
                ng-model="vm.allowPostProjectRate"
                type="checkbox">
            <label></label>
          </div>
        </div>
      </div>

    .margin-bottom-xs { margin-bottom: 0.25em }

And here's what I see:

enter image description here

And then scrolling down the page, this:

enter image description here

Solution

  • Adjust one of the visibility properties of the checkbox.

    Due to some bug or inscrutable issue with the way Semantic-UI displays these toggles over the underlying checkbox elements, properties controlling visibility anchor these elements in place.

    You can simply set the opacity, for instance, to a high number that isn't quite 1

    This CSS rule should do the trick: 

    .ui.toggle.checkbox {
    opacity: 0.95;
}