2013-12-17 59 views
4

我正在嘗試使用angular-ui-0.6.0和bootstrap-3.0製作模態窗口。Angular-UI模態窗口高度

我的模板是:

<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

你可以看到在頁腳白的地方,如何去除呢?

謝謝。

回答

13

爲了遏制對話框的高度,我做了以下內容:

將這個在modal.open配置,以避免與其他對話

windowClass: 'your-modal-class', 

然後在我的CSS我添加了這個衝突:

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