jquery - Bootstrap 3 Collapse Glitch -


site in question: http://www.cqwebdesign.co.uk/wine-site/france.html

basically in left sidebar if click heading collapse. when notice list of check boxes glitch there margin or padding being added somewhere.

i can't seem find problem or causing else see what's going?

issue

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />  <h3 data-toggle="collapse" data-target="#colour"><i class="fa fa-angle-down"></i> colour</h3>  <div id="colour" class="filter-group collapse in">    <ul>      <li>        <div class="checkbox">          <label><input type="checkbox"> red (221)</label>        </div>      </li>      <li>        <div class="checkbox">          <label><input type="checkbox"> dry white (128)</label>        </div>      </li>      <li>        <div class="checkbox">          <label><input type="checkbox"> sparkling (19)</label>        </div>      </li>      <li>        <div class="checkbox">          <label><input type="checkbox"> sweet white (16)</label>        </div>      </li>      <li>        <div class="checkbox">          <label><input type="checkbox"> rose (6)</label>        </div>      </li>      <li>        <div class="checkbox">          <label><input type="checkbox"> mixed cases (1)</label>        </div>      </li>      <li>        <div class="checkbox">          <label><input type="checkbox"> spirits , liqueurs (1)</label>        </div>      </li>    </ul>  </div>

this because of overflow: hidden being added collapsing element , gets margins collapsed:

.site-sidebar .filter-group {   overflow: hidden; } 

lemme know if solution works. waiting tried in website using dev tools , worked. might find there's increased space because of margins of <ul>.

the other solution rid of margins of <div class="checkbox">:

.site-sidebar .filter-group .checkbox {   margin: 0; } 

Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -