search

angular / flex-layout

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
MIT License
5.9k stars 771 forks source link

fxLayoutGap="10px 20px grid" - alternative axis value and grid not working? #1411

Open fredjohnd opened 2 years ago

fredjohnd commented 2 years ago

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.

stephendeo commented 2 years ago

You can fix this by doing the following. Just by wrapping your child elements with a fxFlex directive it should work. 

<div fxLayout="row wrap" fxLayoutGap="20px grid">
  <div fxFlex>
  <span>Child Element</span>
  </div>
</div>