Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Selection lists list item misaligned #9156

Closed
lennybr opened this issue Dec 28, 2017 · 3 comments · Fixed by #9163 or #9500
Closed

Selection lists list item misaligned #9156

lennybr opened this issue Dec 28, 2017 · 3 comments · Fixed by #9163 or #9500
Assignees
@devversion
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@lennybr
Copy link

lennybr commented Dec 28, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When using selection-type list, expect that left alignment is the same as a non selection-type list, without an additional 16px of padding.

What is the current behavior?

When using selection-type list, .mat-list-item-content-reverse is applied (flex-direction: row-reverse), but there is an extra left-padding of 16px that is left over. Without the reversal of flex-direction, the padding is correctly aligned.

What are the steps to reproduce?

https://stackblitz.com/angular/jdyoyxpmkng
Also present in the docs (https://material.angular.io/components/list/overview)

What is the use-case or motivation for changing an existing behavior?

Lists should all align for consistency.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/core 5.1.2 @angular/material 5.0.0-rc.3

Is there anything else we should know?

Potential fix is that .mat-list-text {padding: 0 16px} but when under .mat-list-item-content-reverse .mat-list-text { padding: 0 16px 0 0;}

Screenshot: https://snag.gy/WLCghp.jpg
@devversion devversion self-assigned this Dec 28, 2017
@devversion devversion added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Dec 29, 2017
devversion added a commit to devversion/material2 that referenced this issue Dec 29, 2017
@devversion
fix(list): incorrect padding for list-items with avatars, icons
6bc0e00 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes angular#9156
devversion added a commit to devversion/material2 that referenced this issue Dec 29, 2017
@devversion
fix(list): incorrect padding for list-items with avatars, icons
a275fb7 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes angular#9156
devversion added a commit to devversion/material2 that referenced this issue Dec 29, 2017
@devversion
fix(list): incorrect padding for list-items with avatars, icons
67b2d34 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes angular#9156
@devversion devversion mentioned this issue Dec 29, 2017
Merged
@lennybr
Copy link
Author

lennybr commented Dec 29, 2017

Thanks @devversion

@devversion
Copy link
Member

No problem. Thanks for reporting this.

andrewseguin pushed a commit that referenced this issue Jan 12, 2018
@devversion @andrewseguin
fix(list): incorrect padding for list-items with avatars, icons (#9163)
dfbd8d2 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes #9156
andrewseguin pushed a commit to andrewseguin/components that referenced this issue Jan 12, 2018
@devversion @andrewseguin
fix(list): incorrect padding for list-items with avatars, icons (angu…
1550502 
…lar#9163)

Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes angular#9156
andrewseguin pushed a commit that referenced this issue Jan 17, 2018
@devversion @andrewseguin
fix(list): incorrect padding for list-items with avatars, icons (#9163)
2b074ef 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes #9156
@devversion devversion removed the has pr label Jan 17, 2018
@devversion devversion reopened this Jan 17, 2018
devversion added a commit to devversion/material2 that referenced this issue Jan 20, 2018
@devversion
fix(list): incorrect padding for list-items with avatars, icons
1ffd095 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

![image](https://user-images.githubusercontent.com/4987015/34438121-95d9eb66-eca4-11e7-83c6-64bafff75887.png)

![image](https://user-images.githubusercontent.com/4987015/34438122-9806cd1e-eca4-11e7-993f-8bb0e434a610.png)

Fixes angular#9156
devversion added a commit to devversion/material2 that referenced this issue Jan 20, 2018
@devversion
fix(list): incorrect padding for list-items with avatars, icons
47b5ee8 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

![image](https://user-images.githubusercontent.com/4987015/34438121-95d9eb66-eca4-11e7-83c6-64bafff75887.png)

![image](https://user-images.githubusercontent.com/4987015/34438122-9806cd1e-eca4-11e7-993f-8bb0e434a610.png)

Fixes angular#9156
devversion added a commit to devversion/material2 that referenced this issue Jan 20, 2018
@devversion
fix(list): incorrect padding for list-items with avatars, icons
3d9ee53 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

![image](https://user-images.githubusercontent.com/4987015/34438121-95d9eb66-eca4-11e7-83c6-64bafff75887.png)

![image](https://user-images.githubusercontent.com/4987015/34438122-9806cd1e-eca4-11e7-993f-8bb0e434a610.png)

Fixes angular#9156
@devversion devversion mentioned this issue Jan 20, 2018
Merged
jelbourn pushed a commit that referenced this issue Jan 24, 2018
@devversion @jelbourn
fix(list): incorrect padding for list-items with avatars, icons (#9500)
39a5861 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

![image](https://user-images.githubusercontent.com/4987015/34438121-95d9eb66-eca4-11e7-83c6-64bafff75887.png)

![image](https://user-images.githubusercontent.com/4987015/34438122-9806cd1e-eca4-11e7-993f-8bb0e434a610.png)

Fixes #9156
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 29, 2018
@devversion @jelbourn
fix(list): incorrect padding for list-items with avatars, icons (angu…
db520cf 
…lar#9500)

Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

![image](https://user-images.githubusercontent.com/4987015/34438121-95d9eb66-eca4-11e7-83c6-64bafff75887.png)

![image](https://user-images.githubusercontent.com/4987015/34438122-9806cd1e-eca4-11e7-993f-8bb0e434a610.png)

Fixes angular#9156
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees

@devversion devversion

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@lennybr @devversion