为什么材质设计对话框的主体在iPad上没有高度 [英] Why does the material design dialog body have no height on an iPad

问题描述

我有一个使用angularjs和material-design的Web应用程序.

I have a web application using angularjs and material-design.

我使用md-dialog从数据库添加和编辑某些记录.这是响应式的，并且可以在我的桌面上对除IE之外的所有浏览器正常工作(不足为奇).这就是它的外观.

I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.

但是，如果我在Mac上的safari或iOS上的任何浏览器(包括chrome)上运行该应用程序，则该对话框似乎缺少内容(没有高度).

However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).

虽然IE没有完全相同的问题，但看起来确实很相似.因此，我认为iOS如何呈现flex属性是一个问题.但是，我不确定，也不知道如何在iPad上进行确认.

While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.

到目前为止，我的搜索尚未提供解决此问题的任何可行方法，但是我看到其他人提出了相同的问题(尽管不是通过堆栈).

My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).

什么原因导致此问题? 如何在iPad上修复它?

What causes this issue? How do I fix it for an iPad?

更新

这是在html中呈现对话框的方式:

This is how the dialog is rendered in the html:

<md-dialog-content class="flex" id="dialogContent_140" flex>
    <form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
        ...
    </form>
</md-dialog-content>

如果我修改元素并像这样删除flex:

If I modify the element and remove flex like this:

<md-dialog-content class="flex" id="dialogContent_140">

正文内容按预期出现(至少在MAC上).

The body content appears as expected (at least on the MAC).

我还可以在angular-material.min.css中修改css并删除-webkit-flex，-ms-flex，flex并获得相同的结果.

I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.

[flex]{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    box-sizing: border-box;
}

对于其余的应用程序，我无法完全杀死flex，但是我必须允许它在iPad上运行.

I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.

推荐答案

有关更多信息，请使用某些特殊的浏览器(例如IE，IOS浏览器...)，我们应考虑为flex添加值，例如或flex="100"，它将帮助anuglar-material在这些浏览器上正常运行.

For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.

这篇关于为什么材质设计对话框的主体在iPad上没有高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！