twitter-bootstrap - 模态框以角度调整大小

Question

所以我使用了一个有角度的对话框，但是，为这个对话框设置自定义大小会破坏框内的格式。

我为此创建了一个 plunkr。http://plnkr.co/edit/yXf1kNMqhAdo3iM8dFBy

如果您查看“保存”和“取消”按钮，它们会出现在页面中心附近的某个位置，即使它们是模态页脚的一部分。这应该出现在页面底部。

有谁知道如何解决这个问题？

Answer 1

This is not really an angular issue but more a CSS one. The .modal-body css class specify that the max-height of the body will be 400px. In your case you have set the overall height of the dialog to 700px allocating more space than what the dialog will ever use.

One solution is for you to modify the css classes of the modal dialog as such :

.modal-header {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 100%;
  height : 40px;
}

.modal-body {
  max-height: none;
  position: absolute;
  top: 40px;
  bottom: 60px;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
} 

.modal-footer{
   position : absolute;
   bottom: 0;
   height: 60px;
   box-sizing: border-box;
   width: 100%;
}

A fork of your plunkr with those changes is available here: http://plnkr.co/edit/QnekINr3L82LKr2R7POB