Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fxLayoutAlign conflicts with fxFlex breakpoint evaluation

See original GitHub issue

Bug Report

<div fxLayout="row" fxFlex.gt-sm="25%" fxFlex.lt-md="100%" fxLayoutAlign="center end" class="sec1">

This div (red) should be 25% for breakpoints greater 960px and 100% for all lower resolutions. This works fine if you refresh the page at MD breakpoint (first screenshot), but if you increase the size to LG the div (red) gets 100% of the size. This depends on the fxLayoutAlign directive. If you remove this, then everything works fine. But with fxLayoutAlign the breakpoint for fxFlex are not evaluated, if you resize the browser.

What is the expected behavior?

This works fine in 7.0.0-beta19

What is the current behavior?

This breaks in all version greater than 7.0.0-beta20

What are the steps to reproduce?

https://stackblitz.com/edit/angular-flex-layout-seed-dtspn2

Just resize the output window

Issue Analytics

State:
Created 5 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

silvioboehmecommented, Jan 29, 2019

Yes, all version greater beta 19 are affected

1reaction

tonysampericommented, Feb 7, 2019

yep. same here. I solved downgrading to 7.0.0-beta.19

Top Results From Across the Web

Angular flex layout basics

fxLayoutAlign directive defines alignment of children element within the flexbox ... fxFlex. This markup specifies the resizing of its host element within a ......

Angular UI/Material Design Flashcards by uday A - Brainscape

The algorithm uses breakpoint priorities to sort activate breakpoints by descending-priority. This algorithm searches: For non-overlapping breakpoints: the ...

CSS Flexbox Responsive Layout and % widths - Stack Overflow

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 ......

Angular Flex-Layout: The Alternative Layout Library ... - Medium

xs fxLayout.sm fxLayout.lt-md. There is a breakpoint to cover almost every possible display scenario. The fxFlex directive resizes elements horizontally or ...

Angular Flex-Layout Demos

<div fxLayout="row" fxLayoutAlign="space-around center" > ... fxFlex. <div fxLayout="row" >. 'Flex' with Layout-Wrap Using "layout-wrap" to wrap positioned ...