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

md-list-item: each item takes full height of the screen #8956

Closed
btmura opened this issue Jul 6, 2016 · 6 comments
Closed

md-list-item: each item takes full height of the screen #8956

btmura opened this issue Jul 6, 2016 · 6 comments
Assignees
@devversion
Labels
has: Pull Request A PR has been created to address this issue type: bug

Comments

@btmura
Copy link

btmura commented Jul 6, 2016

Each md-list-item takes the full height of the screen. Each md-list-item should take enough height of its content.

  1. Copy and paste the code in this tutorial below and see that it works:
    http://www.tutorialspoint.com/angular_material/angular_material_list.htm
  2. Change the Angular Material version to the 1.1.0-rc5 and refresh the page.
  3. Note how the list items are the full height of the screen.

Affected: Chrome 51 on Windows, Chrome 41 on Linux
Not affected: Firefox 47.01 Windows, Firefox 45.2 Linux
@devversion
Copy link
Member

This should be fixed within master. Can you create a codepen?

It seems like I can't reproduce that in v1.1.0-rc.5 as well

http://codepen.io/DevVersion/pen/pbwXpd

@devversion devversion self-assigned this Jul 6, 2016
@devversion devversion added the needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue label Jul 6, 2016
@vbraun
Copy link

vbraun commented Jul 15, 2016

I'm seeing the same issue, and for the life of me can't reproduce it in a codepen. With 1.1.0-rc5 and with the current HEAD. Only on chrome, and only if a ng-click handler is set on the md-list-item.

The problem seems to be that the div.md-list-item-inner has height: 100%, as a workaround I can set

.md-list-item-inner {
    height: inherit !important;
}

The parent has height: auto, so the percent height of the child should be ignored:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

But isn't on chrome for some reason. This seems to be a chrome layout bug; Its mysterious to me why it isn't triggered on codepen.

@devversion
Copy link
Member

@vbraun Pretty difficult, if we're not able to reproduce that on a codepen.

Can you please provide some screenshots (DevTools / DOM etc.) ?

@vbraun
Copy link

vbraun commented Jul 15, 2016

So after a fun debugging session I found that this is because of a missing <!DOCTYPE html>. When I add it, list items have the correct height. But without it, list items are screen height high in chrome. Which also explains why it can't be reproduced on codepen, as that helpfully adds the doctype for you ;-)

@devversion devversion added type: bug and removed needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue labels Jul 15, 2016
devversion added a commit to devversion/material that referenced this issue Jul 15, 2016
@devversion
fix(list): only fill minimum required height.
e8bc89b 
* The list currently always expects the list items inner content to have a height of `100%`.
   In some specific browser cases the inner content, will calculate the `100%` in relative to the top element.
   Which causes the list items to be as big as the browsers screen height.

* The inner content, should only have a min-height, which is the same as the defined height on the `md-list-item` item.
   Just inheriting the min-height will automatically use the correct value.

Fixes angular#8956.
@devversion devversion mentioned this issue Jul 15, 2016
Closed
@devversion devversion added the has: Pull Request A PR has been created to address this issue label Jul 15, 2016
@devversion
Copy link
Member

@vbraun Thanks for the information. It helped me to reproduce your issue.

@olsnacky
Copy link

olsnacky commented Aug 4, 2016

FYI, adding appears to cause layout-fill to stop working.

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

No branches or pull requests
4 participants
@vbraun @btmura @devversion @olsnacky