This repository was archived by the owner on Jan 6, 2025. It is now read-only.
Repository navigation
This repository was archived by the owner on Jan 6, 2025. It is now read-only.
fxLayoutGap="10px 20px grid" - alternative axis value and grid not working? #1411
Description
Bug Report
What is the expected behavior?
According to the API of fxLayoutGap it mentions one can append "grid" to the fxLayoutGap value eg. "10px grid" and this merged PR #1234 gives the ability to specify a gap for the opposite axis as well eg. fxLayoutGap="10px 20px grid".
What is the current behavior?
The current behavior is that it does not seem to work. I only get the 10px gap on x axis and no gap vertically.
What are the steps to reproduce?
https://stackblitz.com/edit/fxlayoutgap-grid?file=src%2Fapp%2Fapp.component.html
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I'm using the latest Angular 14 and Flex Layout
Is there anything else we should know?
In addition to not being able to get it to work, Is the documentation out of date? It does not mention the 2 axis values for fxLayoutGap.
Activity
stephendeo commentedon Sep 7, 2022
You can fix this by doing the following. Just by wrapping your child elements with a fxFlex directive it should work.