Question

我一直在试图找到适用于我所有用例的解决方案，并认为我终于找到了一个我想分享的解决方案。

我想要的是一个粘性标题，粘性页脚和可滚动内容，可以在全屏模式下工作。它还需要在所有浏览器中工作（是的，你也是Safari！）。

最后，我不想诉诸CSS覆盖，因为我知道Angular Material 1.x.x并没有很好地与Safari一起玩。

以下模板是我到达的地方。如果你有改进或者它有帮助就大喊大叫！

<md-dialog flex-xl="25"
           flex-lg="30"
           flex-md="40"
           layout="column">
  <md-toolbar class="md-toolbar-tools" flex="none">
    <h2>Add Friends</h2>
    <span flex></span>
    <md-button ng-click="vm.cancel()">
      <md-icon>clear</md-icon>
    </md-button>
  </md-toolbar>

  <md-content flex-xs="100" flex-sm="100">
    <!--Your content here-->
  </md-content>

  <md-dialog-actions flex="none">
    <span flex></span>
    <md-button ng-click="vm.cancel()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

你会注意到flex-xs =“100”和flex-sm =“100”。我在这些场景中全屏，因此进行相应的调整。

Answer 1

我不知道这是否正是你想要的，但我最近遇到了类似的问题，我需要md对话框有一个粘性工具栏（下面有粘性标签）和底部的粘性页脚模态。（我正在使用用户注释的对话框。）我最终包装了我需要滚动到md-content div的对话框内容，并为overflow-y行为编写了一些自定义css。

这是我的HTML：

<md-dialog>
    <md-dialog-toolbar>
    </md-dialog-toolbar>
    <md-tabs>
        <md-tab>
            <md-tab-body>
                <div id="comments">
                    <div class="comments-list-wrapper">
                        <md-content class="chat">
                        </md-content>
                    </div>
                    <md-dialog-actions id="footer">
                    </md-dialog-actions>
                </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>
</md-dialog>

这是我的CSS：

#comments {
    .comments-list-wrapper {
        min-height: 200px;
    }
    md-dialog-actions#footer {
        order: 1;
        flex-shrink: 0;
    }
    .chat {
        max-height: 320px;
        overflow-y: scroll;
    }
}

我不知道这是不是你正在寻找的东西，但在行动中它确实this。

Angular Material Dialogs修复了浏览器的高度问题

1 个答案: