-
Notifications
You must be signed in to change notification settings - Fork 771
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Padding problem at last element in every row when using fxLayoutGap and grid layout #1264
Comments
Can you please use the StackBlitz template to create an example? |
Same issue .. |
check this demo https://stackblitz.com/edit/angular-uygw3r the size of last element is 100% when i remove grid from fxLayoutGap then padding problem at last element in every row will occur |
Having the same problem here. Wrapping the whole thing inside a div with |
Like @Johnny99211 said, this issue should not be fixed by developper as you will need to put ugly workaround that may crash. I think this bug should be more considered. Your own documentation says that this bug is actually a "solution" for a wrap layout with gap 🤣. I guess my client would love this kind of broken design. |
Same problem here, using fxLayoutGap inside a grid creates an ugly scroll bar:
Wrapping the whole thing inside a div with overflow: hidden worked for my case. |
Bug Report
I'm currently facing a big issue in the library. The problem is the fxLayoutGap setting for grid likely designs but just as a flexbox.
For example when I use this settings
fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill
on eachbox/grid
element to add a gap between each boxes, I'm also getting a gap at the last element of each row. In my eyes there should be no gap to prevent a useless padding there:I did a lot of research. The most nearest answer on SO is this one:
Remove padding from fxLayoutGap last element of row
But this answer is just about the las element in a single row so the answer don't helps. So I've continued searching and found this issue from the past:
#363
This is an issue in the actual library. But sadly you said that this is not a bug and should be fixed by the developer. But I think this is not true...
You've provided this answer here...
Simply add a CSS style [fxFlex]:last-of-type { margin-right:15px; }
... and closed the ticket: Closing as a will-not-fix issue. So not very helpful. After trying your answer this way for padding
[fxFlex]::nth-child(4n) { padding-right:0px !important; }
I've found out the the last element get's bigger which looks bad because the padding is not a margin which would not affect the size:This is my code of the element:
What is the expected behavior?
I'm expecting that the last element has no padding at the right side and that the width get's calculated correctly so that the last element is not bigger than the other ones because the padding is missing.
What is the current behavior?
There is too much space at the right side of the last element of a row.
What are the steps to reproduce?
Create a layout like showed above.
What is the use-case or motivation for changing an existing behavior?
The motivation is a good looking website.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Every version I saw so far.
Is there anything else we should know?
No
The text was updated successfully, but these errors were encountered: