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

feat(flex): add support for rem units #901

Merged
merged 1 commit into from
Dec 4, 2018
Merged

feat(flex): add support for rem units #901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/lib/flex/flex/flex.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,15 @@ describe('flex directive', () => {
}, styler);
});

it('should set a min-width and max-width when basis is a rem value', () => {
componentWithTemplate(`<div fxFlex='12rem'></div>`);
expectNativeEl(fixture).toHaveStyle({
'flex': '1 1 12rem',
'max-width': '12rem',
'min-width': '12rem'
}, styler);
});

describe('', () => {

it('should ignore fxLayout settings on same element', () => {
Expand Down
8 changes: 4 additions & 4 deletions src/lib/flex/flex/flex.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ export class FlexStyleBuilder extends StyleBuilder {
const hasCalc = String(basis).indexOf('calc') > -1;
const usingCalc = hasCalc || (basis === 'auto');
const isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
const hasUnits = String(basis).indexOf('px') > -1 || String(basis).indexOf('em') > -1 ||
String(basis).indexOf('vw') > -1 || String(basis).indexOf('vh') > -1;
const isPx = String(basis).indexOf('px') > -1 || usingCalc;
const hasUnits = String(basis).indexOf('px') > -1 || String(basis).indexOf('rem') > -1 ||
String(basis).indexOf('em') > -1 || String(basis).indexOf('vw') > -1 ||
String(basis).indexOf('vh') > -1;

let isValue = (hasCalc || hasUnits);

Expand Down Expand Up @@ -166,7 +166,7 @@ export class FlexStyleBuilder extends StyleBuilder {

// Fix for issues 277, 534, and 728
if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
css[min] = isFixed || (isPx && grow) ? basis : null;
css[min] = isFixed || (isValue && grow) ? basis : null;
css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
}

Expand Down