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

md-list-item: flex filler for secondary container breaks layout #7976

Closed
e-oz opened this issue Apr 11, 2016 · 2 comments
Closed

md-list-item: flex filler for secondary container breaks layout #7976

e-oz opened this issue Apr 11, 2016 · 2 comments
Assignees
@devversion
Labels
pr: merge ready This PR is ready for a caretaker to review type: bug

Comments

@e-oz
Copy link
Contributor

e-oz commented Apr 11, 2016

and it breaks layout.

Codepen: http://codepen.io/evgeniyoz/pen/pyaWoj?editors=1010
Chrome 50.0.2661.66 beta (64-bit),
Safari 9.1
Firefox 45.0.1

Screenshot:
screenshot 2016-04-11 17 38 39
@devversion devversion self-assigned this Apr 11, 2016
@devversion devversion changed the title md-list-item - mysterious div[flex] added when not all flex values are fixed [bug] md-list-item: flex filler for secondary container breaks layout Apr 11, 2016
devversion added a commit to devversion/material that referenced this issue Apr 16, 2016
@devversion
fix(list): remove secondary container flex filler.
3034ae3 
* 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.

Fixes angular#7976.
@devversion devversion mentioned this issue Apr 16, 2016
Closed
@devversion devversion added the pr: merge ready This PR is ready for a caretaker to review label Apr 16, 2016
devversion added a commit to devversion/material that referenced this issue Apr 16, 2016
@devversion
fix(list): remove secondary container flex filler.
d5114fd 
* 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.

Fixes angular#7976.
@ThomasBurleson ThomasBurleson modified the milestone: Backlog Apr 20, 2016
@henrymana
Copy link

henrymana commented Apr 23, 2016 •
edited
Loading

The codepen referenced on the material section (layout tips https://material.angularjs.org/latest/layout/tips) is also broken by the same or a similar issue.... http://codepen.io/team/AngularMaterial/pen/NxKBwW. Code based on the codepen works with 1.1.0-rc1 but broken after that. There is a "div flex" and a secondary item inserted when it shouldn't.

@devversion devversion mentioned this issue Apr 28, 2016
Closed
@devversion devversion mentioned this issue May 12, 2016
Closed
devversion added a commit to devversion/material that referenced this issue May 30, 2016
@devversion
fix(list): remove secondary container flex filler.
c3d191f 
* 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#7976.
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 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.
@e-oz
Copy link
Contributor Author

e-oz commented Jun 1, 2016

Thanks!

@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
pr: merge ready This PR is ready for a caretaker to review 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
6 participants
@ThomasBurleson @e-oz @robertmesserle @Splaktar @devversion @henrymana