1

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

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

这是2.3.1 上存在问题的 Plunker，因此您可以理解问题以及我当前的代码。关于导致问题的任何想法？

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

3 回答 3

1

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

datepicker-append-to-body="true"

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

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

于 2014-04-14T13:14:47.980 回答
1

在你的 CSS 中，overflow: hidden用

.panel-group .panel {
overflow: inherit;
}
于 2014-01-10T12:35:09.477 回答
0

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

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

-斯蒂芬

于 2014-01-01T00:19:51.850 回答