CODEWITHSUNDEEP
javascripthtmlcssangularjsdebugging
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

Angular Material Layout Bug? Cards Are Overlapping

I want to use the responsive layout from material.angularjs.org to display two cards.

On a "real" website, the cards are overlapping on small screens: [Real world example no longer exists]

However, it works when I copy/paste the very same html/js code into a stackoverflow snippet!

Big screen: works fine:

enter image description here

Small screen: cards overlap!

enter image description here

To illustrate better, what it is about, I inserted the code snippet I use on the website below with dummy content:

		(function(){
			'use strict';

			angular
				.module('BlankApp', ['ngMaterial'])
			;
      })();
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

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

	<!-- Angular Material Library -->
	<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<main ng-app="BlankApp" ng-cloak class="md-content">
  
<div layout="row" layout-xs="column">
  <div flex>
    <md-card>
      <img src="http://placehold.it/350x150" class="md-card-image" alt="Washed Out">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Action buttons</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </md-card-content>
      <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>
    <md-card>
      <img src="http://placehold.it/350x150" class="md-card-image" alt="Washed Out">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Action buttons</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </md-card-content>
      <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>
  </main>

How can this unwanted card overlapping be solved?

Upvotes: 0

Views: 1188

Answers (1)

Lars Mertens
Lars Mertens

Reputation: 1439

The following works for me. In a CSS file overwrite this CSS line from angular-material.min.css.

@media (max-width: 599px)
.layout-xs-column>.flex {
     min-height: 0;
}

with:

@media (max-width: 599px)
.layout-xs-column>.flex {
     min-height: auto;
}

I have no experience with material.angularjs.org but it could be hotfixed like this.

Upvotes: 1

Related Questions