datetimepicker zeigt hinter Südfenster

Question

Ich habe Probleme mit dem datetimepicker in jquery ui Layout wird es hinter dem Südfenster angezeigt.

siehe 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

ich ein ähnliches Problem hatte ich es wie this gelöst. Im geöffneten Zustand setze ich die Position vom Widget ab.

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" 
    }); 
} 
});  

In meinem Projekt verwende ich das Body-Tag als Wrapper. Aber in dieser Version benutze ich einen Wrapper am Ende.

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