Why does the material design dialog body have no height on an iPad

问题

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

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.

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).

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).

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

UPDATE

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>

If I modify the element and remove flex like this:

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

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

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;
}

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

回答1:

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.

回答2:

I found the cause of my issues. Thanks to @Tran Khanh Nguyen for moving me in the right direction.

When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.

来源：https://stackoverflow.com/questions/38778981/why-does-the-material-design-dialog-body-have-no-height-on-an-ipad

标签

ios

angularjs

ipad

material-design