Question

我在2个div中有2列布局，设置了不同的边距，在左栏中我有一个bootstrap 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

summernote下拉菜单溢出

1 个答案: