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. Bootstrap-Datetime-picker-z-index

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.

InformationsquelleAutor Tattu | 2015-07-27
Schreibe einen Kommentar