引导日期时间选择器 z-index

Question

我正在使用bootstrap date time picker。它适用于日期和时间选择。但问题是能见度。如果我把它放在任何类型的容器之外，模态是可见的。但是，如果我尝试将其作为 td 放在表格中，则模式不可见。我创建了一个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>

我添加了一张图片来显示问题。日期选择器窗口隐藏在面板内的表格后面，并出现一个滚动条。相反，它应该出现在所有这些之上。

Answer 1

将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;
}

小提琴：http://jsfiddle.net/cjonkdf2/1/

Answer 2

您添加它的部分设置了overflow hidden。

.table-responsive // overflow: hidden

这会阻止任何显示在自身之外的东西。

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

将此css添加到您的页面/样式表中，并在标题中添加表格：

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