angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

bug(list-item): bugs in rendering and aligning child nodes with flexbox in Firefox #8009

Closed e-oz closed 8 years ago

e-oz commented 8 years ago

Emotions it's fine, but bugs are still here. OS X, Firefox 45.0.1: http://codepen.io/evgeniyoz/pen/WwMZEQ

Layout=row: button is not rendered at all, text elements are rendered and aligned ok

screenshot 2016-04-12 20 15 14

Layout=column: button rendered without text inside, text elements are rendered but aligned wrong.

screenshot 2016-04-12 20 17 31

to be clear: I'm not interested in getting fixes of these bugs, this issue is here just to help other users. If you are not interested in it - feel free to close this issue, I don't mind absolutely.

naomiblack commented 8 years ago

Hi @e-oz. Thanks for the update and codepen. I'm closing the issue because we have investigated and are convinced that this is not an issue, but a use of the Angular Material Layout API in a way that is outside the scope of what we intend.

@topherfangio noted on the original issue: we don't typically recommend using flex inside of the <md-list> and <md-list-item> components as they provide very specific styling and adding your own layers of flexbox can be quite tedious and error-prone. In fact, you can see in the following Codepen that it works quite well when used with plain DIVs instead of list elements:

http://codepen.io/team/AngularMaterial/pen/yOvpMW

Because there is a workaround available if you're willing to change your code, regretfully, we will not fix.

We don't have the bandwidth to provide support via the issue tracker, but if you're in need of additional support around how to solve this layout problem in another way, I'd suggest opening a discussion on the user forum https://groups.google.com/forum/#!forum/ngmaterial.

naomiblack commented 8 years ago

Also, for other folks looking at this issue, we maintain a list of tips for working with flexbox, due to the cross-browser complexities caused by different browser implementations. This is admittedly a tough problem that trips a lot of folks up: https://material.angularjs.org/HEAD/layout/tips