CODEWITHSUNDEEP
htmlcssslider
Rocket
Rocket

Reputation: 1093

CSS Label layout affecting Slider

I'm using CSS to space out form fields and there text labels. This works fine, but I also want to use a CSS CheckBox slider, which is configured using a LABEL.

The combination of label CSS for the form field labels and the slider are messing up the slider layout.

I've created a JFIDDLE showing the form field layout, how this is affecting the slider and a working slider when the extra CSS is not involved.

Working Slider:

 <label class="switch">
    <input type="checkbox" name='check' id='check' value="1" />
    <div class="slider"></div>
  </label>

failing slider:

<div class='spaced'>
  <label>Form Label</label>
  <a href='#' title=""><img src="help.png"></a>

  <label class="switch">
    <input type="checkbox" name='check' id='check' value="1" />
    <div class="slider"></div>
  </label>
</div>

Can someone point me in the right direction how to have a working slider spaced as the other fields.

Thanks :)

Upvotes: 1

Views: 219

Answers (1)

Davide Perozzi
Davide Perozzi

Reputation: 386

The style definitions of the "div.spaced label" selector are overriding the styles of the ".switch" selector.

I suggest you to create a seperated div inside the label element:

<label>
    <div class="switch">
        <input type="checkbox" name='check' id='check' value="1" />
        <div class="slider"></div>
    </div>
</label>

This will fix the width problem. To positionate the "a-tag" on the left side of the slider it also needs the float (left) property:

div.spaced a {
    float: left;
    margin-right: 10px; // Optional margin
}

Hint: You can use flexbox as a better layout system :)

I hope i could help you with this.

Upvotes: 1

Related Questions