선택한 선택 상자에 따라 요소 정렬

선택 상자에 Twitter 부트 스트랩 2.3.2 및 chosen plugin을 사용합니다. 선택한 항목이있는 상자에 따라 다른 요소를 정렬하는 방법을 묻습니다.선택한 선택 상자에 따라 요소 정렬

이 스크린 샷에서는 선택 상자 아래에 두 개의 선택 상자와 내용 (요소)을 볼 수 있습니다. 나는 일부 항목을 선택하면

enter image description here

는 상자가 상자에서 헤더 "소스"및 항목을 겹칩니다. 몇 가지 옵션을 선택하면 요소를 정렬하고 옵션을 선택 해제하면 항목을 위로 정렬 (뒤로)하고 싶습니다.

enter image description here

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">[email protected]</option><option value="3">[email protected]</option><option value="4">[email protected]</option><option value="5">[email protected]</option><option value="6">[email protected]</option><option value="7">[email protected]</option><option value="8">[email protected]</option><option value="9">[email protected]</option><option value="10">[email protected]</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">[email protected]</option><option value="3">[email protected]</option><option value="4">[email protected]</option><option value="5">[email protected]</option><option value="6">eugene.jeff[email protected]</option><option value="7">[email protected]</option><option value="8">[email protected]</option><option value="9">[email protected]</option><option value="10">[email protected]</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; 
}

출처

2014-11-08 Matt

: http://jsfiddle.net/b71e7w3k/2/을 ??? 또는 대신 min-height를 사용하십시오. http://jsfiddle.net/b71e7w3k/3/ ??? –

@ A.Wolff 도움을 주셔서 감사합니다, 그것은 해결책의 일부가 될 수 있지만, "옵션이 선택 해제되었을 때 (뒤로) 요소 정렬"을 잊어 버렸습니다. – Matt

세트의 ID ATTR. 지. 테스트) :

<select id="test" data-placeholder= "address"... 
... 
</select>

변경 이벤트. #test_chosen, 비슷한 ID att에주의하십시오. <select>. 접미사 _chosen이 플러그인으로 추가되었습니다.

$('select[name=personContainSelect]', this).chosen().change(function(){   
     var h=$('#test_chosen').height() 
     h+=56;//init height of chosen    
     $('#personFilter').height(h) 
    });

SOLUTION 2 CSS # '에 대한 높이 personalFilter` 제거

#personFilter{ 
    height: auto; 
}

출처

2014-11-08 19:44:34 dm4web

도움을 주셔서 감사합니다. CSS로 해결할 수 있을지 궁금했지만이 또 다른 방법입니다. – Matt

내 대답에 첵 솔루션 2 – dm4web

선택한 선택 상자에 따라 요소 정렬

답변

관련 문제