summernote dropdown-menu overflow

Question

2 마디가 서로 다른 여백으로 설정된 2 열 레이아웃이 있고, 왼쪽 열에는 datetimepicker 및 summernote가 있습니다.

datetimepicker 대화 상자가 내부 div 외부로 오버플로되는 것을 볼 수 있듯이 summernote의 드롭 다운에서 어떻게 동일한 결과를 얻을 수 있습니까? 가능한가? https://jsfiddle.net/SycoLTH/2j0ykbgf/

<style> 
form { 
    height: 100%; 
    width: 100%; 
} 

#out-container { 
    background-color: #000000; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: flex; 
} 

#in-container { 
    background-color: #FFFFFF; 
    width: 100%; 
    height: 100%; 
    max-height: 80%; 
    max-width: 70%; 
    margin: auto; 
    padding: 3%; 
} 

#column-left, 
#column-right { 
    height: 100%; 
    width: 50%; 
    overflow: auto; 
} 
</style> 

<script type="text/javascript"> 
$(".datetimepicker").datetimepicker({ 
    showClear: true, 
    showTodayButton: true 
}); 

$(".summernote").summernote({ 
    theme: "simplex", 
    disableDragAndDrop: true, 
    shortcuts: false, 
    toolbar: [ 
    ["style", ["bold", "italic", "underline", "clear"]], 
    ["misc", ["undo", "redo"]], 
    ["font", ["strikethrough", "superscript", "subscript"]], 
    ["fontsize", ["fontsize"]], 
    ["color", ["color"]], 
    ["para", ["ul", "ol", "paragraph"]], 
    ["insert", ["picture", "link", "video", "table", "hr"]], 
    ["height", ["height"]] 
    ] 
}); 
</script> 

<div id="out-container"> 
    <div id="in-container"> 
    <form> 
     <div id="column-left" class="pull-left"> 
     Some text 
     <br> Some text 
     <br> Some text 
     <br> Some text 
     <br> Some text 
     <br> Some text 
     <br> 
     </div> 
     <div id="column-right" class="pull-left"> 
     Date: 
     <br> 
     <input type="text" class="datetimepicker form-control" /> 
     <br> 
     <br> Text: 
     <br> 
     <textarea class="summernote"></textarea> 
     </div> 
    </form> 
    </div> 
</div> 

Answer 1

position: absolute 객체가 가장 가까운 position: relative 객체의 경계에 의해 잘립니다 :

여기에 문제가 내 놀이터입니다. 이 경우 경계 위로 summernote popovers를 표시하는 가장 쉬운 방법은 아래와 같이 오른쪽 열을 설정하십시오.

#column-right { 
    overflow:visible; 
} 

참조 : http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent