Using angular/flex-layout, I have a simple two-column layout.
<div fxFlex fxLayout="row">
<div fxFlex="35%">
<!-- Left Column -->
</div>
<div fxFlex="65%">
<!-- Right Column -->
</div>
</div>
On small displays I want the columns to wrap, right below left.
Using angular/flex-layout's Responsive API, I add a breakpoint for small screens (between 600px and 959px) with fxLayout.sm="column"
on the container element:
<div fxFlex fxLayout="row" fxLayout.sm="column">
<div fxFlex="35%">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%">
<!-- Right Column, Bottom Row -->
</div>
</div>
On small screens the Left Column becomes the Top Row, and Right Column, the Bottom Row.
However, fxFlex="35%"
and fxFlex="65%"
attributes are still honored, and so the rows overlap. The Top Row occupies 35% of the display height, since it previously occupied 35% of the display width.
Please see this Plunker for an example of the problem. Note, I used the fxLayout.xs
breakpoint rather than fxLayout.sm
to demonstrate the problem since Plunker's divides the display up into small sections.
I can fix this by explicitly removing fxFlex
using the Responsive API (i.e. fxFlex=""
):
<div fxFlex fxLayout="row" fxLayout.sm="column">
<div fxFlex="35%" fxFlex.sm="">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%" fxFlex.sm="">
<!-- Right Column, Bottom Row -->
</div>
</div>
Please this Plunker for an example of the solution.
There are two problems with this. Firstly, it feels very, very hacky. Secondly, assuming I want the same behaviour for small and extra small displays, I end up with:
<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
<div fxFlex="35%" fxFlex.sm="" fxFlex.xs="">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%" fxFlex.sm="" fxFlex.xs="">
<!-- Right Column, Bottom Row -->
</div>
</div>
Unless there's any easier way to use the Responsive API for displays below a certain dimension, rather than set breakpoints explicitly?
The angular-flex-layout Responsive API also has a gt-sm
(greater than small) property.
To avoid having to add every screen size with an fxFlex=""
value you can just do something like this:
<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
<div fxFlex.gt-sm="35%">
<!-- Left Column, Top Row -->
</div>
<div fxFlex.gt-sm="65%">
<!-- Right Column, Bottom Row -->
</div>
</div>
Or you can use the lt-lg
(less than large) property and have
<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
<div fxFlex="35%" fxFlex.lt-lg="">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%" fxFlex.lt-lg="">
<!-- Right Column, Bottom Row -->
</div>
</div>