AngularJS Datepicker 未在 Bootstrap 3 Collapse/Accordion 上完全显示答案

【问题标题】：AngularJS Datepicker not displaying totally on Bootstrap 3 Collapse/AccordionAngularJS Datepicker 未在 Bootstrap 3 Collapse/Accordion 上完全显示
【发布时间】：2013-11-03 12:33:05
【问题描述】：

我正在使用 Bootstrap 3 和 AngularJS UI。我已经将 Datepicker 集成到手风琴中，但它本身并没有显示在手风琴主体的上方/外部。

我找到了关于同一问题的参考资料和解决方案 (here)，但它是使用 Bootstrap 2.3.1 并在尝试了 .collapse{ position:inherited; } 解决我的代码并尝试覆盖 z-index，它仍然无法正常工作。

这是a Plunker with the problem on 2.3.1，这样您就可以理解问题以及我当前的代码。关于导致问题的任何想法？

<div class="row ix-advanced">
    <div class="panel-group col-md-12" id="accordion">
        <div class="panel panel-default">
            <div id="advancedSearch" class="panel-collapse collapse">
                <div class="panel-body">
                    <form class="form-inline" role="form">
                      <div class="form-group col-md-1">
                        <label><?php echo _t('Date')?></label><br />
                        <input type="text" class="form-control input-sm" datepicker-popup="dd-MM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" placeholder="<?php echo _t('From')?>"/>
                      </div>
                      <div class="form-group col-md-1">
                        <label><?php echo _t('To')?></label><br />
                        <input type="text" class="form-control input-sm" placeholder="<?php echo _t('To')?>">
                      </div>
                    </form>
                </div>
            </div>            
        </div>
    </div>
</div>

【问题讨论】：

标签： angularjs twitter-bootstrap datepicker twitter-bootstrap-3 collapse

【解决方案1】：

在你的 CSS 中，用

覆盖引导程序的面板 overflow: hidden 属性

.panel-group .panel {
overflow: inherit;
}

【讨论】：

【解决方案2】：

解决方案是在最后一个日期选择器中添加以下属性：

datepicker-append-to-body="true"

您可能还想将属性“open”更改为“is-open”。

您可以在更新后的plunker 中查看结果。

【讨论】：

【解决方案3】：

我已将plunker 更新到最新版本，它似乎工作正常。

不过我的问题是，如果您使用网格系统布局控件，那么弹出窗口会被剪裁以适合行和列-

-斯蒂芬

【讨论】：