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

Created on 6 Jul 2016 · 6Comments · Source: angular/material

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

Copy and paste the code in this tutorial below and see that it works:
http://www.tutorialspoint.com/angular_material/angular_material_list.htm
Change the Angular Material version to the 1.1.0-rc5 and refresh the page.
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

Pull Request bug

Source

btmura

Most helpful comment

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 ;-)

vbraun on 15 Jul 2016

👍3

All 6 comments

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 on 6 Jul 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.

vbraun on 15 Jul 2016

👍1

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

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

devversion on 15 Jul 2016

vbraun on 15 Jul 2016

👍3

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

devversion on 15 Jul 2016

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