我使用Twitter Bootstrap 2.3.2和chosen plugin来选择框。我想问一下如何根据所选项目框中的其他元素进行对齐。
在此屏幕截图中,您可以在选择框下看到两个选择框和内容(元素)。
当我选择一些项目时,该框重叠标题"来源"和盒子下的物品。我想在选择某些选项时将元素向下对齐,并在取消选择选项时向上(向后)对齐项目。
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;
}
答案 0 :(得分:1)
为选择(例如测试)设置ID attr:
<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;
}