Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 7759b6c

Browse files
authored
fix(fxLayoutGap): account for responsive fxHide on children elements (#931)
Fixes #606
1 parent 21b6d29 commit 7759b6c

File tree

2 files changed

+36
-9
lines changed

2 files changed

+36
-9
lines changed

src/lib/flex/layout-gap/layout-gap.spec.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,36 @@ describe('layout-gap directive', () => {
412412
expectEl(nodes[1]).toHaveStyle({'margin-bottom': '24px'}, styler);
413413
expectEl(nodes[2]).not.toHaveStyle({'margin-bottom': '*'}, styler);
414414
});
415+
416+
it('should work with responsive fxHide', () => {
417+
let template = `
418+
<div fxLayoutAlign="center center" fxLayoutGap="13px">
419+
<div fxFlex="15" class="sec1" fxFlex.xs="55"></div>
420+
<div fxFlex="30" class="sec2" fxFlex.sm></div>
421+
<div fxFlex="55" class="sec3" fxShow fxHide.sm></div>
422+
</div>
423+
`;
424+
createTestComponent(template);
425+
fixture.detectChanges();
426+
427+
let nodes = queryFor(fixture, '[fxFlex]');
428+
expect(nodes.length).toEqual(3);
429+
expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
430+
expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
431+
expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
432+
433+
matchMedia.activate('sm');
434+
fixture.detectChanges();
435+
expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
436+
expectEl(nodes[1]).not.toHaveStyle({'margin-right': '*'}, styler);
437+
expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
438+
439+
matchMedia.activate('lg');
440+
fixture.detectChanges();
441+
expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
442+
expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
443+
expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
444+
});
415445
});
416446

417447
describe('rtl support', () => {

src/lib/flex/layout-gap/layout-gap.ts

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
173173
}
174174
// Gather all non-hidden Element nodes
175175
const items = this.childrenNodes
176-
.filter(el => el.nodeType === 1 && this.getDisplayStyle(el) !== 'none')
176+
.filter(el => el.nodeType === 1 && this.willDisplay(el))
177177
.sort((a, b) => {
178178
const orderA = +this.styler.lookupStyle(a, 'order');
179179
const orderB = +this.styler.lookupStyle(b, 'order');
@@ -200,14 +200,11 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
200200
}
201201
}
202202

203-
/**
204-
* Quick accessor to the current HTMLElement's `display` style
205-
* Note: this allows us to preserve the original style
206-
* and optional restore it when the mediaQueries deactivate
207-
*/
208-
protected getDisplayStyle(source: HTMLElement = this.nativeElement): string {
209-
const query = 'display';
210-
return this.styler.lookupStyle(source, query);
203+
/** Determine if an element will show or hide based on current activation */
204+
protected willDisplay(source: HTMLElement): boolean {
205+
const value = this.marshal.getValue(source, 'show-hide');
206+
return value === true ||
207+
(value === '' && this.styleUtils.lookupStyle(source, 'display') !== 'none');
211208
}
212209

213210
protected buildChildObservable(): void {

0 commit comments

Comments
 (0)