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

fix(list): item-inner shouldn't be wider than the container #7531

Closed
wants to merge 1 commit into from
Closed

fix(list): item-inner shouldn't be wider than the container #7531

wants to merge 1 commit into from

Conversation

devversion
Copy link
Member

This fixes a overflow issue - when being in a flex layout.

image

image

  • Also fixes the issue, when using a custom background color on the list-item.

Fixes #7551 Fixes #7525

@devversion devversion added the needs: review This PR is waiting on review from the team label Mar 11, 2016
@devversion devversion mentioned this pull request Mar 11, 2016
Closed
@EladBezalel EladBezalel added needs: manual testing This issue or PR needs to have some manual testing and verification done and removed needs: review This PR is waiting on review from the team labels Mar 12, 2016
@EladBezalel EladBezalel changed the title fix(list): item-inner should be not wider than the container fix(list): item-inner shouldn't be wider than the container Mar 12, 2016
@EladBezalel
Copy link
Member

LGTM needs to manual tested

@devversion
Copy link
Member Author

@EladBezalel Thanks 👍 This should be tested manually as soon as possible, because the overflow seems to be broken in some specific layouts.

@devversion devversion force-pushed the fix/list-inner-width branch from bf4207b to 52a8c40 Compare March 13, 2016 13:41
@devversion devversion mentioned this pull request Mar 13, 2016
Closed
@devversion
fix(list): item-inner should be not wider than the container
f39c13c 
* List Item Content should be not wider than the container, this will cause overflow issues
* Background Color of the Button Wrap should not inherit its parent, otherwise the text will be unreadable, if the button overlays with a fixed background color

Fixes angular#7551 Fixes angular#7525
@devversion devversion force-pushed the fix/list-inner-width branch from 52a8c40 to f39c13c Compare March 13, 2016 14:08
@devversion devversion mentioned this pull request Mar 14, 2016
Closed
ThomasBurleson
ThomasBurleson reviewed Mar 14, 2016
View reviewed changes
src/components/list/list.scss
margin: 0;

// The button should not inherit the parents background color.
background-color: initial;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you have this here. Is the rule specified in the Design specifications?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, that's just our button wrap, it's just executing the ripple and the click attributes. It should not inherit the background, otherwise the text content will be invisible.

http://codepen.io/anon/pen/dMpWpQ

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not understand the need for this setting. I see no difference with or without this setting.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button wrap, has the _md-no-style class applied, which removes all the needed stylings.

image

And _md-no-style applies the background color inheritance to the button wrap, which is a bug, because the button wrap, should be transparent, as it is by default.

So now if remove the inheritance, the background-color won't be red anymore.
image

This is a bug, because this is our executor and ripple wrap, which overlays over the actual list. So that means, if it has the inherited background-color, the complete list will be invisible.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

initial is not supported in IE

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already talked about that with Thomas, IE11 doesn't need this property, because the bug isn't present there. So this will be just an unnecessary property on IE11

@ThomasBurleson ThomasBurleson added needs: team discussion This issue requires a decision from the team before moving forward. in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs labels Mar 14, 2016
ThomasBurleson pushed a commit that referenced this pull request Mar 16, 2016
@devversion @ThomasBurleson
fix(list): item-inner should be not wider than the container
531af61 
* List Item Content should be not wider than the container, this will cause overflow issues
* Background Color of the Button Wrap should not inherit its parent, otherwise the text will be unreadable, if the button overlays with a fixed background color

Fixes #7551. Fixes #7525. Closes #7531.
@devversion devversion deleted the fix/list-inner-width branch April 19, 2016 19:50
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees

@EladBezalel EladBezalel

Labels
in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs needs: manual testing This issue or PR needs to have some manual testing and verification done needs: team discussion This issue requires a decision from the team before moving forward.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Text disappears in md-list-item if background-color is set Md-list-item with ng-click still broken in master
3 participants
@devversion @EladBezalel @ThomasBurleson