Bootstrap-Datetime-picker-z-index
Ich bin mit bootstrap date time picker. Seine feinen arbeiten mit Datum und Uhrzeit Auswahl. Aber das problem ist die Sichtbarkeit. Wenn ich es außerhalb jeder Art von container, den modal sichtbar ist. Aber Wenn ich versuche es als td in eine Tabelle, dann das modal ist, nicht sichtbar. Habe ich einen jsfiddle illustrieren die gleichen.
Ich durchgemacht habe die css-Datei von der Website erwähnt, und versuchte, zu Größe, z-index etc. Aber nichts funktioniert.
Bitte helfen Sie mir, legen Sie einen z-index oder eine andere Lösung um die Sichtbarkeit zu verbessern.
<div class="panel panel-info" style="margin-top: 1%">
<div class="panel-heading" id="JnName">Date Picker</div>
<div class="panel-body">
<form name="form3" role="form">
<div class="table-responsive" style="size:auto; max-width: 100%;">
<table class="table table-bordered table-striped" id="System Analysis">
<tbody>
<tr>
<td width="50%">
<div class="row-fluid">
<div class="col-xs-4">
<div class="box">From Date:</div>
</div>
<div class='col-sm-8'>
<div class="form-group">
<div class='input-group date' id='rptDateFrom'>
<input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false" value='' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#rptDateFrom').datetimepicker({
//viewMode: 'months',
format: 'DD/MM/YYYY',
widgetPositioning:
{
horizontal: 'left',
vertical: 'bottom'
}
});
});
</script>
</div>
</div>
</td>
<td width="50%">
<div class="row-fluid">
<div class="col-xs-6">
<div class="box">From Time [HH]:</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='cboFromTime'>
<input type='text' name='cboFromTime' class="form-control" id='cboFromTime' onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#cboFromTime').datetimepicker({
//format: 'HH:mm'
format: 'HH',
widgetPositioning:
{
horizontal: 'left',
vertical: 'bottom'
}
});
});
</script>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
Habe ich Euch ein Bild zeigen das problem. Der Datum-picker-Fenster ist versteckt hinter dem Tisch in das panel und eine schriftrolle erscheint. Anstatt, dass es erscheinen soll ist noch nicht alles.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ändern
overflow-y: hidden;
zuoverflow-y: visible;
Fiddle:http://jsfiddle.net/cjonkdf2/1/
Dem Abschnitt, den Sie Hinzugefügt haben, es hat
overflow hidden
festgelegt sind.Diese hält alles zeigen, außerhalb von sich selbst.
Entfernen und alles wird gut - mit dieser zumindest, aber es könnte brechen anderem
Fügen Sie dieses css auf Ihrer Seite/Stil Blatt mit der Tabelle in der Kopfzeile: