flex-layout
flex-layout copied to clipboard
angular
Responsive API is not working with fxFlexFill
Bug, feature request, or proposal:
Bug
What is the expected behavior?
fxFlexFill.<breakpoint alias> should limit directive to proper width range.
What is the current behavior?
Adding breakpoint alias seems to disable directive.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-flex-layout-seed-h5ajhj?file=app%2Ftest.component.ts
What is the use-case or motivation for changing an existing behavior?
Existing behaviour seems to be broken.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Every I tested.
Is there anything else we should know?
@ThomasBurleson Do you want to add a responsive API to this directive? If not, it should be closed since the docs have been updated to include this clarification.
It would be a great addition.. right now we cant to have fxFlexFill only if fxLayout="column" and not fxLayout.gt-sm="row".. adding responsive features to fxFlexFill would make that super simple :)
@mackelito This is probably something we could get in after beta.14 is validated, but if you wanted to throw together a PR sooner than that, I'd be happy to review it! 😄
@CaerusKaru this is an interesting issue b/c the library is quite constrained in this area. I was looking at issuing a PR as you solicited in 2018 since it's still not addressed. However, I think it's worth a bit of discussion on approach.
Here is the criteria around this I can see:
- Ability to fill horizontal-only(e.g. fxFillH.gt-lg), vertical-only (e.g. fxFillV.gt-lg), both (current behavior)
- Allow user to specify a % that is used for width, height, max-width, max-height instead of default 100% on all these properties (e.g. fxFill.gt-lg="30%").
Considerations:
- How does this effect rendering if user adds fxFill, fxFillV, fxFillH to the same element to get predictable behavior? Perhaps fxFill checks for fxFillV & fxFillH...if either are active (based on BP)...then utilize those in fxFill...and in fxFillV, or fxFillH...if fxFill is present and active (based on BP) -- then do nothing since that will reference the %/px values if any in fxFillV, fxFillH
- Add support to new layout system RFC.
This would be very powerful in allowing very responsive handling of fill such as with SVG's. Let me know your thoughts.
My preference for this would be to have it managed as an input. E.g. <h w> in percents. This would allow us to keep using one directive and maintain backwards-compatibility for current fxFill users.
On a side note, please ping me on my personal email: (my GitHub alias separated by . at gmail dot com). We can discuss this as well as your cascading router PR on angular/angular.