diff --git a/src/lib/flex/layout-gap/layout-gap.spec.ts b/src/lib/flex/layout-gap/layout-gap.spec.ts
index 7f58ede66..d6357d9a5 100644
--- a/src/lib/flex/layout-gap/layout-gap.spec.ts
+++ b/src/lib/flex/layout-gap/layout-gap.spec.ts
@@ -412,6 +412,36 @@ describe('layout-gap directive', () => {
expectEl(nodes[1]).toHaveStyle({'margin-bottom': '24px'}, styler);
expectEl(nodes[2]).not.toHaveStyle({'margin-bottom': '*'}, styler);
});
+
+ it('should work with responsive fxHide', () => {
+ let template = `
+
+ `;
+ createTestComponent(template);
+ fixture.detectChanges();
+
+ let nodes = queryFor(fixture, '[fxFlex]');
+ expect(nodes.length).toEqual(3);
+ expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+ expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
+ expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+ matchMedia.activate('sm');
+ fixture.detectChanges();
+ expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+ expectEl(nodes[1]).not.toHaveStyle({'margin-right': '*'}, styler);
+ expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+ matchMedia.activate('lg');
+ fixture.detectChanges();
+ expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+ expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
+ expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+ });
});
describe('rtl support', () => {
diff --git a/src/lib/flex/layout-gap/layout-gap.ts b/src/lib/flex/layout-gap/layout-gap.ts
index 6b60a30d8..bf1cc89a8 100644
--- a/src/lib/flex/layout-gap/layout-gap.ts
+++ b/src/lib/flex/layout-gap/layout-gap.ts
@@ -173,7 +173,7 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
}
// Gather all non-hidden Element nodes
const items = this.childrenNodes
- .filter(el => el.nodeType === 1 && this.getDisplayStyle(el) !== 'none')
+ .filter(el => el.nodeType === 1 && this.willDisplay(el))
.sort((a, b) => {
const orderA = +this.styler.lookupStyle(a, 'order');
const orderB = +this.styler.lookupStyle(b, 'order');
@@ -200,14 +200,11 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
}
}
- /**
- * Quick accessor to the current HTMLElement's `display` style
- * Note: this allows us to preserve the original style
- * and optional restore it when the mediaQueries deactivate
- */
- protected getDisplayStyle(source: HTMLElement = this.nativeElement): string {
- const query = 'display';
- return this.styler.lookupStyle(source, query);
+ /** Determine if an element will show or hide based on current activation */
+ protected willDisplay(source: HTMLElement): boolean {
+ const value = this.marshal.getValue(source, 'show-hide');
+ return value === true ||
+ (value === '' && this.styleUtils.lookupStyle(source, 'display') !== 'none');
}
protected buildChildObservable(): void {