Angular-UI modal window height

Question

I'm trying to make modal window with angular-ui-0.6.0 and bootstrap-3.0.

My template is:

<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 for modal:

.modal { display: block; }

Modal window opens normally, but it's height is more than need. I tried to set up height: auto for .modal but it didn't help.

You can see white place under footer, how to remove it?

Thank you.!

Answer 1

To tame the height of the dialog, I did the following:

Put this on the modal.open config to avoid clashes with other dialogs

windowClass: 'your-modal-class',

Then in my css I added this:

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