Angular-UI模态窗口高度

时间:2013-12-17 07:59:25

标签: modal-dialog twitter-bootstrap-3 angular-ui

我正在尝试使用angular-ui-0.6.0和bootstrap-3.0创建模态窗口。

我的模板是:

<div class="modal-header">
    <h3>Create new entry</h3>
</div>

<div class="modal-body" ng-repeat="e in create_elements">
    <label>Test</label>
    <input class="form-control" style="height: 30px; width: 98%" type="text" required ng-model="e.model"></input>
    <label id="{{e.label}}" style="display: none; color: red;">{{e.label}} - can't be empty</label>
</div>

<div class="modal-footer">
    <button class="btn btn-success" ng-click="create(create_elements)">Create</button>
    <button class="btn btn-warning" ng-click="close()">Cancel</button>
</div>

模态的css:

.modal {     显示:块; }

模态窗口正常打开,但它的高度超过了需要。我尝试为height: auto设置.modal,但没有帮助。

enter image description here

你可以在页脚下看到白色的地方,如何删除它?

谢谢。!

1 个答案:

答案 0 :(得分:14)

为了驯服对话的高度,我做了以下几点:

将它放在modal.open配置上,以避免与其他对话框发生冲突

windowClass: 'your-modal-class',

然后在我的CSS中我添加了这个:

div.your-modal-class .modal-content {
    max-height: 600px;
    overflow: auto;
}