Bootstrap 日期时间选择器 z-index

Question

我正在使用 bootstrap date time picker. Its working fine with the date and time selection. But the problem is the visibility. If I put it outside any sort of container the modal is visible. But If I try to put it as a td inside a table, then the modal is not visible. I have created a jsfiddle 说明相同的内容。

我浏览了上述站点的 css 文件，并尝试设置大小、z-index 等。但没有任何效果。

请帮助我设置 z-index 或其他一些解决方案以提高可见性。

    <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>

我添加了一张图片来说明问题。日期选择器 window 隐藏在面板内的 table 后面，并出现一个滚动条。而不是它应该出现在所有这些之上。

Answer 1

您添加的部分已设置 overflow hidden。

.table-responsive // overflow: hidden

这会停止在其外部显示任何内容。

删除它，一切都会好起来的 - 至少有这个，但它可能会破坏其他东西

将此 css 添加到您的 page/style sheet 以及 header 中的 table:

.table-responsive {
  overflow: visible !important;
}

Answer 2

将overflow-y: hidden;更改为overflow-y: visible;

.table-responsive {
  width: 100%;
  margin-bottom: 15px;
   overflow-y: visible;  // Add overflow-y visible
   overflow-x: scroll; 
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #ddd;
  -webkit-overflow-scrolling: touch;
}

Fiddle:http://jsfiddle.net/cjonkdf2/1/