6
AngularJS Material Designを初めて使用しています。Mac Safariで問題が発生しました。ユーザーに表示されるダイアログボックスがあり、そのダイアログボックスはMac Safari以外のすべてのブラウザで問題なく表示されます。Mac SafariでAngularJS Materialダイアログが正しく表示されない
、それは私のようないくつかの回避策を提供することで問題を解決しようとしてい
それは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>
[この問題]（https://github.com/angular/material/issues/10516）が関連している可能性があります – troig
@MikeFeltman：私はそれを試みたが、うまくいかなかった – wizzardz