[英]Align elements according to chosen select box
我使用Twitter Bootstrap 2.3.2並為選擇框選擇了插件 。 我想問一下如何根據所選項目的框對齊其他元素。
在此屏幕截圖中,您可以在選擇框下看到兩個選擇框和內容(元素)。
當我選擇一些項目時,該框重疊標題“Source”和框下的項目。 我想在選擇某些選項時將元素向下對齊,並在取消選擇選項時向上(向后)對齊項目。
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;
}
set ID attr for select(例如test):
<select id="test" data-placeholder= "address"...
...
</select>
添加更改事件。 注意#test_chosen,來自<select>
類似ID att。 后綴_chosen由插件添加。
$('select[name=personContainSelect]', this).chosen().change(function(){
var h=$('#test_chosen').height()
h+=56;//init height of chosen
$('#personFilter').height(h)
});
解決方案2: CSS
#personFilter{
height: auto;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.