uib-datepicker:在表中使用时显示问题

时间:2017-01-17 10:26:12

标签: css angularjs twitter-bootstrap angular-ui-bootstrap

我想在表中使用uib-datepicker:

<div class="table-responsive">
    <table class="table table-striped"  >
        <thead>
            <tr>
                <th class="col-md-2"><span>Date</span></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="materiel in vm.chantier.listeMateriels track by materiel.id">
                <td class="col-md-2">
                    <div class="input-group">
                        <input type="text" class="form-control" datepicker-popup="{{vm.formatDate}}"uib-datepicker-popup ng-model="materiel.date"
                               is-open="materiel.isOpen" ng-change="vm.dateDebutChanged()"  />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="vm.openCalendarMateriel($event, materiel)">
                                <i class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </div>
                </td>                
            </tr>
        </tbody>
    </table>
</div>

但这是我得到的: 点击之前: enter image description here

点击后: enter image description here

似乎日历被表格边框截断,我希望它出现在我的表格上方

1 个答案:

答案 0 :(得分:2)

从您的父class="table-responsive"删除div:它会截断日期选择器。

Demo on JSFiddle