Selectize.js 및 Datatables 가로 스크롤

Question

나는 individual column searching (with select inputs)으로 Datatable을 가지고 있습니다. 이제 Selectize.js을 추가하고 싶지만 올바르게 가져 오는 방법을 알아낼 수 없습니다.

horizontal scrolling을 활성화하면 풀다운이 부분적으로 숨겨집니다.

아주 간단한 예 :

<table class="table table-hover table-striped"> 
    <tfoot> 
     <tr> 
      <td><select></selection> 
     </tr> 
    </tfoot> 
</table> 
<script> 
$(document).ready(function() { 
    $('table').DataTable({ 
     "scrollX": true, 
    }); 
    $('select').selectize(); 
}); 
</script> 

내가 여기 JSFiddle를 만든이 : https://jsfiddle.net/svierkant/maa64vw4/3/

나는 여러 위치에 z-index을 추가하려고했지만, 그럴 수 없어 모든 선택 옵션을 표시하는 방법을 찾아보십시오.

선택 옵션이 숨겨지지 않도록하려면 어떻게해야합니까?

Answer 1

selectize-dropdown 요소를 추가 할 위치를 선택할 수 있습니다. 기본적으로는 Selectize 제어의 자식으로 첨부되어

https://github.com/selectize/selectize.js/blob/master/docs/usage.md :

드롭 다운 메뉴에 추가되는 요소. '본문'또는 null이어야합니다. null 인 경우, 드롭 다운은 Selectize 컨트롤의 아이로서 추가됩니다.

행 (tfoot>tr>td)의 높이가 고정되어 있으므로이 경우 요소가 보이지 않게됩니다.

설정 body-dropdownParent 도움 :

$('select').selectize({ 
    "dropdownParent": "body" 
}); 

업데이트 바이올린 : https://jsfiddle.net/svierkant/maa64vw4/4/