6
Jestem nowy w AngularJS Material Design Jestem zaskoczony problemem w Mac Safari. Mam okno dialogowe do wyświetlenia użytkownikowi i to okno dialogowe nadchodzi bez żadnych problemów we wszystkich przeglądarkach z wyjątkiem Mac Safari.Okno dialogowe Materiał AngularJS nie wyświetla się poprawnie w Mac Safari
Jak to dostałem wyświetlane w innych przeglądarkach
Jak to dostałem wyświetlanych w systemie Mac Safari
starałem się rozwiązać ten problem poprzez zapewnienie kilka obejścia jak "flex-shrink: 0" "flex-basis: auto;" ale nic nie działa.
Oto miniaturowa wersja mojego kodu lub użyj code pen. Każda pomoc lub sugestia jest wysoko ceniona.
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>
[ten numer] (https://github.com/angular/material/issues/10516) może być powiązany – troig
Nie wiem, czy to pomoże, ale czy nie, ale
@MikeFeltman: Próbowałem, ale nie działało – wizzardz