summernote Dropdown-Menü Überlauf

Question

Ich habe ein 2-Spalten-Layout innerhalb von 2 divs mit unterschiedlichen Rändern eingestellt, auf der linken Spalte habe ich einen Bootstrap datetimepicker und summernote.

Wie Sie sehen können, ist der datetimepicker Dialog außerhalb des internen div übergelaufen, wie kann ich dasselbe mit den Dropdown-Listen von summernote erreichen? Ist es möglich?

Hier ist mein Spielplatz mit dem Thema: 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 Objekte, die von dem gebundenen seinem nächsten position: relative Objekt abgeschnitten werden. In diesem Fall versuchen Sie am einfachsten, Sommernotiz-Popovers über die Grenze zu zeigen, indem Sie die rechte Spalte wie folgt einstellen.

#column-right { 
    overflow:visible; 
} 

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