I'm currently utilizing Twitter Bootstrap 2.3.2 along with the chosen plugin for select boxes. I have a question regarding how to align other elements based on the box with selected items.
Below, you can see two select boxes and content (elements) positioned under the select boxes.
Whenever I select some items, the box ends up overlapping the header "Source" as well as the items located beneath it. My goal is to have the elements shift down when options are selected and move back up when the options are deselected.
The HTML code looks like this:
<div id="filter">
<div id="personFilter" class="form-group">
<h4> Person filter </h4>
<div id="personFilterContain">
...
</div>
<div id="personFilterNotContain">
...
</div>
<div class="checkbox">
...
</div>
</div>
...
<script>
$(document).ready(function () {
$('select[name=personNotContainSelect]', this).chosen();
$('select[name=personContainSelect]', this).chosen();
});
</script>CSS Styles:
#filter{
text-align: center;
}
...