CODEWITHSUNDEEP
iosangularjsipadmaterial-design
davids
davids

Reputation: 5587

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.

enter image description here

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

enter image description here

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.

Upvotes: 2

Views: 1585

Answers (2)

Nguyen Tran
Nguyen Tran

Reputation: 1188

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.

Upvotes: 0

davids
davids

Reputation: 5587

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.

Upvotes: 1

Related Questions