Align items according to the selected selection box
I am using Twitter Bootstrap 2.3.2 and selected plugin for selected fields. I would like to ask how the other elements can be aligned according to the box with the selected elements.
In this screenshot, you can see two select boxes and content (items) in the select box.
When I select some items, the box overlaps the Source title and the items below it. I would like to align items when some options are selected and align items up (back) when no options are selected.
Html
<div id="filter">
<div id="personFilter" class="form-group">
<h4> Person filter </h4>
<div id="personFilterContain">
<h5> Contain </h5>
<select data-placeholder= "address"
name="personContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis@gmail.com</option><option value="3">meredith.sullivan@gmail.com</option><option value="4">essie.castro@gmail.com</option><option value="5">arnold.clayton@gmail.com</option><option value="6">eugene.jefferson@gmail.com</option><option value="7">ora.gibbs@gmail.com</option><option value="8">katherine.frank@gmail.com</option><option value="9">preston.goodwin@gmail.com</option><option value="10">edna.burke@gmail.com</option></select>
</div>
<div id="personFilterNotContain">
<h5> Dont contain </h5>
<select data-placeholder="address"
tabindex="4" name="personNotContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis@gmail.com</option><option value="3">meredith.sullivan@gmail.com</option><option value="4">essie.castro@gmail.com</option><option value="5">arnold.clayton@gmail.com</option><option value="6">eugene.jefferson@gmail.com</option><option value="7">ora.gibbs@gmail.com</option><option value="8">katherine.frank@gmail.com</option><option value="9">preston.goodwin@gmail.com</option><option value="10">edna.burke@gmail.com</option></select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="personCheckBox"> Apply
</label>
</div>
</div>
<!-- ********************* Source Filter ********************* -->
<div id="sourceFilter" class="form-group">
<h4> Source </h4>
<div id="sourceFilterSource">
<label class="checkbox inline">
<input type="checkbox" name="sourceMailCheckBox"> Mail
</label>
<label class="checkbox inline">
<input type="checkbox" name="sourcePhoneCheckBox"> Phone
</label>
<label class="checkbox inline">
<input type="checkbox" name="sourceDiscussionCheckBox"> Discussion
</label>
</div>
</div>
<script>
$(document).ready(function () {
$('select[name=personNotContainSelect]', this).chosen();
$('select[name=personContainSelect]', this).chosen();
});
</script>
CSS
#filter{
text-align: center;
}
#filter, #details{
overflow: auto;
}
#filter h4{
text-align: left;
}
#personFilter, #sourceFilter{
width: 535px;
height: 200px;
margin: 0 auto;
display: inline-block;
}
#personFilter{
height: 100px;
margin-top: 27px;
display: inline-block;
}
#personFilter h5{
max-width: 200px;
padding-left: 1px;
text-align: left;
margin-bottom: 5px;
}
#personFilter select{
width: 250px;
}
#personFilter div{
display: inline-block;
}
#personFilterContain{
max-width: 400px;
float:left;
}
#personFilterNotContain{
max-width: 400px;
float: left;
margin-left: 30px;
}
#personFilter label:last-child{
width: 0;
}
#personFilter .chosen-container{
top:-30px;
}
#personFilter .checkbox{
width: 300px;
float: left;
margin-top: -10px;
}
#sourceFilter {
text-align: left;
margin-top: 21px;
position: relative;
}
#sourceFilterSource{
margin-top: 15px;
}
+3
source to share
1 answer
set ID attr to select (like test):
<select id="test" data-placeholder= "address"...
...
</select>
add a change event. note the #test_chosen, a similar id from <select>
. _chosen suffix added by plugin.
$('select[name=personContainSelect]', this).chosen().change(function(){
var h=$('#test_chosen').height()
h+=56;//init height of chosen
$('#personFilter').height(h)
});
SOLUTION 2: CSS
#personFilter{
height: auto;
}
+1
source to share