CODEWITHSUNDEEP
angularjsangular-material
cmonkey
cmonkey

Reputation: 4296

Angular-material md-list-item full screen height sometimes

Each list-item ends up full screen height when click actions are attached. It should only be large enough to enclose the text.

Below is a minimal example of the problem that shows the problem when opened as a file.

It works properly in codepen - http://codepen.io/anon/pen/ZOaPVy - , and it works properly when the click action is removed. I am viewing it in chrome browser on Linux.

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body>
  <md-list ng-app="BlankApp">
    <md-list-item ng-click="null">
      <p> List item 1 </p>
    </md-list-item>
    <md-list-item ng-click="null">
      <p> List item 2 </p>
    </md-list-item>
  </md-list>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>

  <script type="text/javascript">
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

This is a more simplified version of a similar question: Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

Upvotes: 1

Views: 628

Answers (1)

camden_kid
camden_kid

Reputation: 12813

I reproduced this very odd problem in Chrome and Safari on a MacBook. It doesn't appear in Firefox.

The culprit seems to be the 100% height of _md-list-item-inner of the md-list-item

enter image description here

If you add this to the <head> all should be good

<style>
  md-list-item._md-button-wrap>div.md-button:first-child ._md-list-item-inner {
    height: initial;
  }
</style>

Upvotes: 1

Related Questions