Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

mdListItem: rendering problem with WebKit (angular-material >= 1.1.0-rc2) #8094

Closed
igdtl opened this issue Apr 18, 2016 · 3 comments
Closed

mdListItem: rendering problem with WebKit (angular-material >= 1.1.0-rc2) #8094

igdtl opened this issue Apr 18, 2016 · 3 comments
Assignees
@devversion
Labels
has: Pull Request A PR has been created to address this issue type: bug

Comments

@igdtl
Copy link

igdtl commented Apr 18, 2016

It seems that this fix breaks md-list-item on WebKit browsers (tested with Chromium 48 and Safari 9.1)

angular-material-1.1.0-rc1

<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc1/angular-material.css">
  </head>
  <body ng-app="app">

    <md-list>
      <md-list-item>Test 1</md-list-item>
      <md-list-item>Test 2</md-list-item>
    </md-list>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc1/angular-material.js"></script>

    <script>
      var app = angular.module('app', ['ngMaterial']).controller('AppCtrl', function(){});
    </script>
  </body>
</html>

angular-material-1.1.0-rc1

angular-material-1.1.0-rc2

<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.css">
  </head>
  <body ng-app="app">

    <md-list>
      <md-list-item>Test 1</md-list-item>
      <md-list-item>Test 2</md-list-item>
    </md-list>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.js"></script>

    <script>
      var app = angular.module('app', ['ngMaterial']).controller('AppCtrl', function(){});
    </script>
  </body>
</html>

angular-material-1.1.0-rc2

Note: not reproducible on Codepen / Fidle
@ThomasBurleson
Copy link
Contributor

@devversion - Can you investigate?

@ThomasBurleson ThomasBurleson added this to the 1.1.0 milestone Apr 20, 2016
devversion added a commit to devversion/material that referenced this issue Apr 20, 2016
@devversion
fix(list): secondary item container expected a height of 100%
ec9515e 
* The height of 100% for the secondary item container was depending on its parent DOM structure. So in some weird cases, the secondary item container was reserving 100% height of the screen.

Fixes angular#8094.
devversion added a commit to devversion/material that referenced this issue Apr 20, 2016
@devversion
fix(list): secondary item container expected a height of 100%
6f5f093 
* The height of 100% for the secondary item container was depending on its parent DOM structure. So in some weird cases, the secondary item container was reserving 100% height of the screen.

Fixes angular#8094.
@devversion devversion mentioned this issue Apr 20, 2016
Closed
@devversion
Copy link
Member

@igdtl Thanks for the issue, you're right - it's a bug and it's caused by the secondary item container, which expects a height of 100%.

The problem is, that those 100% are in some cases not in relative to the actual list-item, which causes the 100% to use the screens 100%.

This issue was introduced in a previous commit, which made the secondary items static.

The relevance of that feature was really high, because this fixes some huge issues with the overflow on list-items.

Also we've removed the behavior of wrapping all content inside of a button, this actually made the list-item usable with Firefox. Before of that, items inside of a list-item were not clickable, because Firefox and IE are blocking pointer events inside of a button (our wrap)

So actually there was a lot of improvement in the md-list the last releases, but it also introduced a few edge-case bugs, but I'm trying my best to solve them.

@devversion devversion added the has: Pull Request A PR has been created to address this issue label Apr 20, 2016
@igdtl
Copy link
Author

igdtl commented Apr 21, 2016

Thanks! @devversion

@igdtl igdtl mentioned this issue Apr 29, 2016
Closed
@ThomasBurleson ThomasBurleson modified the milestones: 1.1.0, Deprecated May 26, 2016
@devversion devversion modified the milestones: - Backlog, Deprecated May 27, 2016
devversion added a commit to devversion/material that referenced this issue May 30, 2016
@devversion
fix(list): remove secondary container flex filler.
f953a68 
* Currently the secondary container was pushed to the end of the list-item by using a flex element with auto.
  This is causing issues with custom content of developers, because the flex filler has a high priority and reserves space.

* This can be fixed, by using a margin auto, which has a lower priority and isn't reserving any space.
   This allows the user to style the content himself and we won't interfere.

* The height of 100% for the secondary item container was depending on its parent DOM structure. So in some weird cases, the secondary item container was reserving 100% height of the screen. This property even became unnecessary, because now the secondary items are expecting its size correctly and will fill the remaining space by the auto margin.

Fixes angular#8094. Fixes angular#7976.
@devversion devversion mentioned this issue May 30, 2016
Closed
devversion added a commit to devversion/material that referenced this issue May 31, 2016
@devversion
fix(list): remove secondary container flex filler.
c7e23ae 
* Currently the secondary container was pushed to the end of the list-item by using a flex element with auto.
  This is causing issues with custom content of developers, because the flex filler has a high priority and reserves space.

* This can be fixed, by using a margin auto, which has a lower priority and isn't reserving any space.
   This allows the user to style the content himself and we won't interfere.

* The height of 100% for the secondary item container was depending on its parent DOM structure. So in some weird cases, the secondary item container was reserving 100% height of the screen. This property even became unnecessary, because now the secondary items are expecting its size correctly and will fill the remaining space by the auto margin.

Fixes angular#8094. Fixes angular#7976.
devversion added a commit to devversion/material that referenced this issue May 31, 2016
@devversion
fix(list): remove secondary container flex filler.
3e97d78 
* Currently the secondary container was pushed to the end of the list-item by using a flex element with auto.
  This is causing issues with custom content of developers, because the flex filler has a high priority and reserves space.

* This can be fixed, by using a margin auto, which has a lower priority and isn't reserving any space.
   This allows the user to style the content himself and we won't interfere.

* The height of 100% for the secondary item container was depending on its parent DOM structure. So in some weird cases, the secondary item container was reserving 100% height of the screen. This property even became unnecessary, because now the secondary items are expecting its size correctly and will fill the remaining space by the auto margin.

Fixes angular#8094. Fixes angular#7976.
@Splaktar Splaktar removed this from the - Backlog milestone Feb 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
has: Pull Request A PR has been created to address this issue type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(list): remove secondary container flex filler. devversion/material
4 participants
@ThomasBurleson @Splaktar @devversion @igdtl