Menu
I am new to AngularJS Material Design I am struck with an issue in Mac Safari. I have a dialog box to be displayed to the user and that dialog box is coming without any issues in all browsers except for Mac Safari.
How it got displayed in other browsers
How it got displayed in Mac Safari
I have tried to fix the issue by providing few workarounds like "flex-shrink:0" "flex-basis: auto;" but nothing seems to be working.
Here is the miniature version of my code or use code pen. Any help or suggestion is highly appreciated.
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>
742
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
93
I'm guessing the problem is the layout="column" with a flex value on its children. I've had this problem in IE and I'm guessing it's the same with Safari. Either specify a height so the children know what they're flexing relative to, or (even better in my opinion) is to remove the layout="column" and the flex values on the children and just use the normal document flow since divs will be stacked vertically automatically and the dialog should grow with the content anyway. Reducing the number of layout and flex attributes like this also helps with layout performance - a BIG problem in IE.
Long story short - never flex a child within a parent that has layout="column" unless the parent has a height (or is flexed) because some browsers will shrink the children.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
