Material: md-list-item: buggy behavior in Firefox when layout=column

[e-oz]

Codepen:
http://codepen.io/evgeniyoz/pen/WwMZEQ?editors=1000
Firefox 45.0.1

Width 1280px:
Caption of the button is empty and button is not rendered at all (awesome, lol).

Width 1250px (and lower):
now button is here but still without caption.

[HappyDayHunter]

I think that using layout="column" isn't recommended to be used in md-list-item. You can fix ur issue by removing the flex boxes from the div element.

[e-oz]

Any links to documentation to prove it, @Lordnoname ?

[devversion]

@e-oz Your markup seems not really structured, you're placing a column layout inside a column layout.
Additionally, when trying to have multiple text lines inside the list-item, you should apply the recommended classes like md-3-line, where three lines is the maximum, which has been mentioned in the specifications. (Here)

[e-oz]

@DevVersion my markup is structured, don't worry, it's "row" on mobile and "column" on wider screens, so all your assumptions are wrong. And md-line-3 has 0 effect to disappeared button and I don't have 3 lines of text there, so please don't use words like "you should" when you just guess.

[devversion]

@e-oz I'm sorry if I sounded to strong. Your demo is just showing two column layouts inside of each other - So I'm not able to look into your complete code, which shows the correct behavior of your issue..

The md-3-line class was not just guessed, it's was an ascertainment, since your demo shows, that you try to show three lines of texts in a column row.

<div class="md-body-1" layout="column">
  <div>AAA</div>
</div>
<div class="md-body-1">HHH</div>
<div class="md-body-1">ZZZ</div>

About the disappearing button - I didn't reply yet to that point and the md-3-line class can be not associated with your button.

At last, I think in this case, there was no guessing - but in general, we're trying to solve your issue, but I can't help you, when I'm not able to publish my thoughts...

[e-oz]

@DevVersion it is 1 line of text. 3 columns in row, but still 1 line of text.

So I'm not able to look into your complete code, which shows the correct behavior of your issue..

Codepen is enough to reproduce bug. Bug is not related to text at all.

we're trying to solve your issue

are you member of AngularMaterial team? It's not obvious from your github profile and you don't have "collaborator" label.

I can't help you, when I'm not able to publish my thoughts...

Funny enough. Thanks for trying to help, anyway.

[devversion]

@e-oz - Your demo is showing that you're flexing the text nodes in a vertical layout..

Codepen is enough to reproduce bug. Bug is not related to text at all.

This was not clearly described in your issue description.
Since all three text lines are overlaying itself, I associated it with the layout="column" issue.

are you member of AngularMaterial team? It's not obvious from your github profile and you don't have "collaborator" label.

The collaborator label has been removed since some months from GitHub.

I'm pinging @topherfangio to stand in.

[e-oz]

@DevVersion

This was not clearly described in your issue description.

Please read text near screenshots.

Since all three text lines are overlaying itself

Not always, see first screenshot.

The collaborator label has been removed since some months from GitHub.

I don't think so:
https://developer.github.com/v3/repos/collaborators/
Example: https://github.com/isaacs/github/issues/605

[topherfangio]

@e-oz Firstly, let me confirm that @DevVersion is indeed a member of our team and that he is attempting to help. Regardless, we would ask that you be respectful, and even gracious, to anyone (a team member or not) that responds to your issue in an attempt to help and realize that

1. Not everyone has the same development skills as you,
2. nobody knows your exact situation, so we all have to extrapolate and guess a little bit, and
3. English is not the first language of many users here, so sometimes this can cause confusion

To answer your question, it does indeed look like this is a bug in Firefox. However, 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/topherfangio/pen/XdZzgy?editors=1000

Unfortunately, we do not currently mention in the docs which components support internal flexbox and which ones do not (or that it may causes issues when doing so); I will discuss with the team about how we can address this and give users a bit more insight.

Lastly, I must admit that I too am a bit confused on what you are attempting to achieve since some of your screenshots show attributes like layout-gt-md="row", but your provided Codepen does not use that. Additionally, the Codepen you provided is at a different URL than the one in your screenshot, and I'm not sure what all of the differences are.

I know that we typically ask for a very simple Codepen that reproduces the exact problem, and you have provided that; but I think in this case it may help if we could see a bit more of your code to understand exactly what you are trying to achieve so that we can dig a bit deeper into the Firefox issue and/or find a workaround.

[e-oz]

@topherfangio so I guess that rule (about being respectful) is applied to you also - so please cite where I was not "gracious".

However, we don't typically recommend using flex inside of the and components

It's not mentioned in your docs:
https://material.angularjs.org/latest/demo/list
https://material.angularjs.org/latest/api/directive/mdList
https://material.angularjs.org/latest/api/directive/mdListItem

Unfortunately, we do not currently mention in the docs which components support internal flexbox and which ones do not

And it speaks a lot about quality of your product.

Additionally, the Codepen you provided is at a different URL than the one in your screenshot, and I'm not sure what all of the differences are.

It's forked codepen, don't worry, only difference is removed layout-gt-md="row" - it doesn't affect any bugs, presented in this issue. It's just to remove any distractions, to help you.

I must admit that I too am a bit confused on what you are attempting to achieve since some of your screenshots show attributes like layout-gt-md="row", but your provided Codepen does not use that.

This confusion is very easy to resolve - just try to add that attribute and remove it again. Not a big deal.

[e-oz]

I know that we typically ask for a very simple Codepen that reproduces the exact problem, and you have provided that; but I think in this case it may help if we could see a bit more of your code to understand exactly what you are trying to achieve so that we can dig a bit deeper into the Firefox issue and/or find a workaround.

First of all, I don't need workaround, don't waste your time. It's 5000+ locs (in templates) app, and applying workarounds for each case will be just not effective usage of time. It's intranet app and we can force users to use Chrome, but for other (possible) users of AngularMaterial it would be useful to solve presented bugs, especially about button rendering.

What I'm trying to achieve in this "issue" - just same behavior as in Chrome and Safari. 3 rows, aligned by flex. Flexbox is a main tool for the layout composition in AngularMaterial, so I really shocked you don't support it 100%.

[ThomasBurleson]

@e-oz - We have plans for a significant improvement to the the Layout implementations... but those will not be available until at least Q3. Nevertheless, we would welcome your improvements (via Pull Requests) to our Layout (flexbox) engine.

[e-oz]

I impressed how you solved this issue and especially bug with button rendering. Thank you for awesome work!

[ThomasBurleson]

@e-oz - We closed this issue because you explicitly stated: "First of all, I don't need workaround, don't waste your time...".

Please note that you are violating our Code of Conduct with your sarcasm and non-positive input.

[e-oz]

@ThomasBurleson I created codepen and screenshots for you to demonstrate obvious and awful bugs - you ignored it and closed issue, zeroing my efforts and without any explanations (it's rude). Sarcasm is the most polite reaction in this case.

[e-oz]

@DevVersion next time try to run code with your suggestions in codepen before suggest "your structure is wrong, go rewrite everything with md-line-3 and maybe everything will be fine".

[naomiblack]

@e-oz I'm one of the leads on Angular. I wanted to explain why we have closed this issue and locked conversation.

Per the Angular code of conduct, which I recommend you review:
_Communication through any of Angular's channels (GitHub, IRC, mailing lists, Google+, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harrassment, insults, or other unprofessional conduct._

_If any member of the community violates this code of conduct, the maintainers of the Angular project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate._

The tone of the comments you made in this issue included direct personal attacks and insults. This isn't acceptable. Please keep your comments technical and on-topic in future issues.