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

Commit 3cd5bc1

Browse files
danmanaCaerusKaru
authored andcommitted
fix(fxLayoutAlign): do not apply cross-axis stretch styles when not needed (#877)
Closes #876
1 parent f24b24f commit 3cd5bc1

File tree

2 files changed

+33
-1
lines changed

2 files changed

+33
-1
lines changed

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

+30
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,17 @@ describe('layout-align directive', () => {
196196
'max-height': '100%'
197197
}, styler);
198198
});
199+
it('should not add special styles when the cross-axis is not `stretch`', () => {
200+
createTestComponent(`
201+
<div fxLayout
202+
fxLayoutAlign='center center'>
203+
</div>
204+
`);
205+
206+
expectNativeEl(fixture).not.toHaveStyle({
207+
'max-height': '100%'
208+
}, styler);
209+
});
199210
it('should add special styles for cross-axis `stretch` when layout is `column`', () => {
200211
createTestComponent(`<div fxLayout="column" fxLayoutAlign='end stretch'></div>`);
201212
expectNativeEl(fixture)
@@ -282,6 +293,25 @@ describe('layout-align directive', () => {
282293
}, styler);
283294
});
284295

296+
it('should undo special styles when cross-axis changes from `stretch` to anything else', () => {
297+
createTestComponent(`
298+
<div fxLayout
299+
fxLayoutAlign='center stretch'
300+
fxLayoutAlign.md='center center'>
301+
</div>
302+
`);
303+
304+
expectNativeEl(fixture).toHaveStyle({
305+
'max-height': '100%'
306+
}, styler);
307+
308+
matchMedia.activate('md');
309+
310+
expectNativeEl(fixture).not.toHaveStyle({
311+
'max-height': '100%'
312+
}, styler);
313+
});
314+
285315
it('should fallback to default styles when the active mediaQuery change is not configured', () => { // tslint:disable-line:max-line-length
286316
createTestComponent(`
287317
<div fxLayout

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,9 @@ export class LayoutAlignDirective extends BaseDirective implements OnInit, OnCha
190190
return extendObject(css, {
191191
'display' : 'flex',
192192
'flex-direction' : this._layout || 'row',
193-
'box-sizing' : 'border-box'
193+
'box-sizing' : 'border-box',
194+
'max-width': null,
195+
'max-height': null,
194196
});
195197
}
196198

0 commit comments

Comments
 (0)