-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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
Grid list is not responsive ? #7154
Comments
Perhaps if you use FlexLayout instead of Grid List, it would work fine for your use case. Eq: https://tburleson-layouts-demos.firebaseapp.com/#/responsive |
Duplicate of #1072 |
@leocaseiro : Thank you for your references... In #6777 , I could find a comment that talk about an responsive angular article that just saved my life. That was what I needed. Thanks again |
It would be good if the Angular Material website made some mention of responsive layout! |
For Angular Material 6.2.1, here's the tutorial to create 12 columns responsive grid. https://ampersandacademy.com/tutorials/angular-material/responsive-grid-layout-in-angular-material |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Hi guys. I'm trying to have a collection of cards (on multiple line). So I thought that using a Grid list would do the job. So I've used a grid list with 4 columns. I have something like 22 cards.. But When I'm trying to resize the browser to see the "responsive" side effect, What I see is that cards are just shrinked .. I thought that the number of columns will be reduced until to have just one column.
What is the expected behavior?
When reducing the browser, cards should not be shrinked and should be moved below, on the next row, keeping its size.
What is the current behavior?
Cards are shrinked and contents inside the cards disappear.
What are the steps to reproduce?
my-main-component.html
my-rbwc-measurement-card-component.html:
Am I missing something or doing something wrong ? Thank you in advance for your help
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 4.4.0-RC.0
Material: 2.0.0-beta.10
Typescript: 2.5.2
Browser: Chrome (for now)
Multiple cards look before resizing the browser:
![image](https://user-images.githubusercontent.com/15614466/30567196-37a37ffa-9c9d-11e7-948c-54e5d1c1d47e.png)
Multiple cards look after resizing the browser:
![image](https://user-images.githubusercontent.com/15614466/30567238-78e7d48e-9c9d-11e7-8ab2-095b3bed55a4.png)
The text was updated successfully, but these errors were encountered: