Question

我是AngularJS Material Design的新手我在Mac Safari中遇到了一个问题。我有一个向用户显示的对话框，除Mac OS外，所有浏览器都没有任何问题。

如何在其他浏览器中显示

如何在Mac Safari中显示

我试图通过提供一些解决方法来解决这个问题，例如“flex-shrink：0”“flex-basis：auto;”但似乎没有任何工作。

以下是我的代码的缩小版或使用code pen。任何帮助或建议都非常感谢。

main.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
    <style>
        .flexfix {
            flex-shrink: 0;
            flex-basis: auto;
        }
    </style>
    <script>
        var dialogApp = angular.module('latestDialogApp', ['ngMaterial']);

        dialogApp.controller('AppController', function ($scope, $mdDialog) {
            $scope.TestString = "App Has been initialted";

            $scope.showCustomDialog = function () {

                $mdDialog.show({
                    templateUrl: 'login.dialog.2.html',
                    parent: angular.element(document.body),
                    clickOutsideToClose: true,
                });

            };
        });
    </script>
</head>
<body ng-app="latestDialogApp" ng-controller="AppController">
    <div layout="column" layout-fill layout-align="center center"> 
        <div layout="row" layout-align="center center">
            {{TestString}}
        </div>
        <div layout="row" layout-align="center center">
            <md-button class="md-raised md-warn" ng-click="showCustomDialog()" type="button">Show Dialog</md-button>
        </div>
    </div>

</body>
</html>

login.dialog.2.html

<md-dialog class="flexfix">
    <form ng-cloak class="flexfix">
        <md-toolbar>
            <div layout="row" layout-align="space-between center" flex="100" layout-fill class="md-toolbar-tools">
                <md-button class="md-raised md-warn custom-back-Btn">Back</md-button>
            </div>
        </md-toolbar>

        <md-dialog-content class="flexfix">
            <div layout="column" class="flexfix">
                <div layout="row" layout-align="center center" class="flexfix">
                    <h3>Login Dialog</h3>
                </div>
                <div layout="row" layout-fill layout-margin class="flexfix">
                    <md-input-container class="md-block" layout-xl="column">
                        <label>Email</label>
                        <input name="username" ng-model="dialog.username" md-autofocus required />
                    </md-input-container>
                </div>
                <div layout="row" layout-fill layout-margin class="flexfix">
                    <md-input-container class="md-block" layout-xl="column">
                        <label>Password</label>
                        <input type="password" name="password" ng-model="dialog.password" required />
                    </md-input-container>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="column" class="flexfix">
            <div layout="row" flex="100" layout-fill layout-margin class="flexfix">
                <md-button class="md-raised md-warn" layout-fill>Login</md-button>
            </div>
            <div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix">
                <label>OR</label>
            </div>
            <div layout="row" layout-fill layout-margin class="flexfix">
                <md-button class="md-raised md-primary" layout-fill>Login Option 2</md-button>
            </div>
            <div layout="row" layout-fill layout-margin class="flexfix">
                <md-button class="md-raised md-primary" layout-fill>Login Option 3</md-button>
            </div>
            <div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix">
                <a href="" class="md-primary custom-center-margin"> I Forgot My Password </a>
            </div>
            <div layout="row" layout-fill layout-margin layout-align="center center" class="flexfix">
                <h6>About Us</h6>
                <h6>Terms</h6>
            </div>
        </md-dialog-actions>
    </form>
</md-dialog>

Answer 1

try by adding this css

.flex { flex : 1 1 0%; }

and

-webkit-box-direction: normal; 
-webkit-box-orient: vertical;

and you can additionally follow this link https://github.com/angular/material/issues/1720

Answer 2

我猜测问题是layout="column"，其子项的值为flex。我在IE中遇到过这个问题，而且我猜测它和Safari一样。指定一个高度，让孩子们知道他们相对于他们弯曲的东西，或者（在我看来更好）是删除孩子们的layout="column"和flex值，然后使用正常的文档流程div将自动垂直堆叠，对话框应随内容一起增长。减少这样的layout和flex属性的数量也有助于布局性能 - IE中的一个大问题。

长话短说 - 从不在具有layout="column"的父级中弯曲孩子，除非父级有高度（或被弯曲），因为某些浏览器会缩小子级。

AngularJS材质对话框在Mac Safari中无法正常显示

2 个答案: