Angular Material - Overlapping div in Internet Explorer and Safari

Question

Angular Material - Overlapping div in Internet Explorer and Safari

I started developing an application using angular material, and the layout makes good use of chrome and firefox. However, when I use ie11 or safari (ipad), the angular material md card overlaps. This happens when the layout becomes a column. for devices with a small screen.

Internet explorer

Chrome

Here codepen

http://codepen.io/rodwin/pen/rxWdMj?editors=100

body {
    background-color: #fcfcfc;
    /*background-color: #FFF;*/
    position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.white {
    background-color: #fff;
}

#main {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#main .wrapper {
	position: absolute;
	left: 0;
	right: 0;
	top: 10%;
	
	
}

.promo i {
    color: #ee6e73;
    font-size: 7rem;
    display: block;
}

.block-button {
    width: 100%;
    margin-bottom: 5px;
}

.demo-container {
    border-radius: 4px;
    margin-bottom: 16px;
    -webkit-transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
    transition: 0.02s padding cubic-bezier(0.35, 0, 0.25, 1);
    position: relative;
    padding-bottom: 0;
}



.tabsdemoDynamicHeight md-content h2:first-child {
margin-top: 0;
    margin-bottom: 0;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

md-content {
    -ms-overflow-style: none;
}

<html lang="en" >
<head>
  <!-- Angular Material style sheet -->
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <header>
        
    </header>
    <main>
        <md-content id="main" ui-view="" flex="" class="anim-in-out ng-scope flex" data-anim-sync="true" data-anim-speed="300">
      
        <md-toolbar class="md-toolbar-tools" layout-align="center center" style="position: relative">
        
        <h2>
            <span>sample app</span>
        </h2>
        </md-toolbar>
        <md-content class="wrapper anim-fade" layout-padding layout="row" layout-xs="column" layout-sm="column">
        <div flex="33" flex-sm="100" flex-xs="100">
            <md-card class="md-hue-1">
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Card with image</span>
                        <span class="md-subhead">Small</span>
                    </md-card-title-text>
                    <md-card-title-media>
                        <div class="md-media-md card-media">

                            <div class="center promo promo-example">
                                <a ui-sref="checkin.default" style="text-decoration: none;"><i class="large material-icons">input</i></a>
                            </div>

                        </div>
                    </md-card-title-media>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Action 1</md-button>
                    <md-button>Action 2</md-button>
                </md-card-actions>
            </md-card>
        </div>
        <div flex="33" flex-sm="100" flex-xs="100">
            <md-card class="md-hue-1">
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Card with image</span>
                        <span class="md-subhead">Small</span>
                    </md-card-title-text>
                    <md-card-title-media>
                        <div class="md-media-md card-media">
                            <div class="center promo promo-example">
                                <a ui-sref="devicesetup" style="text-decoration: none;"><i class="large material-icons">phonelink_setup</i></a>
                            </div>
                        </div>

                    </md-card-title-media>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Action 1</md-button>
                    <md-button>Action 2</md-button>
                </md-card-actions>
            </md-card>
        </div>
        <div flex="33" flex-sm="100" flex-xs="100">
            <md-card class="md-hue-1">
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Card with image</span>
                        <span class="md-subhead">Small</span>
                    </md-card-title-text>
                    <md-card-title-media>
                        <div class="md-media-md card-media">
                            <div class="center promo promo-example">
                                <a ui-sref="settings" style="text-decoration: none;"><i class="large material-icons">settings_applications</i></a>
                            </div>
                        </div>
                    </md-card-title-media>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Action 1</md-button>
                    <md-button>Action 2</md-button>
                </md-card-actions>
            </md-card>
        </div>
    </md-content>
        </md-content>
    </main>

  
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>
  
</body>
</html>

Run code Hide result

Appreciate any help or suggestion to eliminate this type of layout. (Please bear my lack of css skills)

+4

css internet-explorer angular-material

rodwin Dec 30 '15 at 6:27

source share

2 answers

pilar1347 · Answer 1 · 2017-02-22T22:28:50+0000

Try setting the parent address of the md content of the cards:

<md-content class="wrapper anim-fade" layout-padding layout="row" layout-wrap></md-content>

md-card IE 11, , flex = "initial":

<md-card-title flex="initial">

, ( IE). , flex = "30", .

flex = "initial", : https://github.com/angular/material/issues/6217

IE 11, : https://github.com/angular/material/issues/5382

: http://codepen.io/anon/pen/VpZEqB

FlashyFuddyFuddy · Answer 2 · 2017-05-16T12:06:24+0000

. "min-height: 1px;" md-. , .

Angular Material - Overlapping div in Internet Explorer and Safari

More articles: