datetimepicker在南窗格後面顯示

Question

我有問題顯示在jquery UI佈局中的datetimepicker它將顯示在南窗格後面。

看到fiddle

<div class="ui-layout-center">Center 
    <p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p> 
    <p>* Pane-resizing is disabled because ui.draggable.js is not linked</p> 
    <p>* Pane-animation is disabled because ui.effects.js is not linked</p> 
</div> 
<div class="ui-layout-north">North</div> 
<div class="ui-layout-south"> 
    <div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 

Answer 1

我有一個類似的問題，我解決它像this。 在打開時，我將該位置設置爲小部件。

var $parent = $("#wrapper"); 
$parent.css("position", "relative"); 
$element 
.datetimepicker({ 
widgetParent: $parent 
}).on("dp.show", function() { 
var widget = $(".bootstrap-datetimepicker-widget"); 
if (widget[0]) { 
    widget.css({ 
    position: "fixed", 
    "z-index": 99999999, 
    top: $element[0].getBoundingClientRect().top - widget.height() - 10, 
    left: $element[0].getBoundingClientRect().left, 
    bottom: "auto", 
    right: "auto" 
    }); 
} 
});  

在我的項目中，我使用body標籤作爲包裝。但在這個版本中，我最後使用了一個包裝器。

<div id="wrapper"></div>