Skip to content
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

Simplify gdColumns use #1161

Closed
romelgomez opened this issue Dec 17, 2019 · 2 comments
Closed

Simplify gdColumns use #1161

romelgomez opened this issue Dec 17, 2019 · 2 comments
Labels

Comments

@romelgomez
Copy link

romelgomez commented Dec 17, 2019

Proposal

What is the summary of the proposal?

Setting gdColumns is verbose and only works on page reload, if the page is resized it will keep the same grid.

gdColumns="auto"  gdColumns.xs="auto"  gdColumns.sm="auto"  gdColumns.md="auto auto"  gdColumns.lg="auto auto auto" gdColumns.xl="auto auto auto" 
  gdColumns.lt-sm="auto"  gdColumns.lt-md="auto auto"  gdColumns.lt-lg="auto auto auto"  gdColumns.lt-xl="auto auto auto"  
  gdColumns.gt-xs="auto"  gdColumns.gt-sm="auto"  gdColumns.gt-md="auto auto"  gdColumns.gt-lg="auto auto"

I found a directive that works* more simple but make use of MatGridListModule

https://stackoverflow.com/a/55407217/2513972

I figure out how to modified it to work only with flex-layout but only I make it work with a component.

I am sharing a functional example: https://stackblitz.com/edit/angular-nfng3n

I find some directives can set attributes in other directives implementation, the stackoverflow example do just that, and I do like do the same thing with flex-layout to have a more reusable directive, example:

<div fxLayout="row" fxLayoutAlign="space-between none" fxLayoutGap="4px"  [appResponsiveColumns]="{xs: 'auto', sm: 'auto', md: 'auto auto', lg: 'auto auto auto', xl: 'auto auto auto'}">

And the appResponsiveColumns directive take care of update gdColumns attribute

@CaerusKaru
Copy link
Member

Issues with page resizing are covered in #1059, and are limited to Chrome. Since this is behavior we do support, but is broken at the browser level, I'm closing this issue. You can track updates in the tracking ticket.

@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 Feb 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants