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 margin
s of <div class="checkbox">
:
.site-sidebar .filter-group .checkbox { margin: 0; }
Comments
Post a Comment