javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): set the flex and width to auto when size is auto

Browse Source 
fixes #14807
This commit is contained in:
Brandy Carney
2018-07-20 14:24:30 -04:00
parent e3d730d1b5
commit ba30671599
2 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/col/col.tsx
View File

@ -192,12 +192,14 @@ export class Col {
return; return;
} }
const colSize = SUPPORTS_VARS // If the size is set to auto then don't calculate a size
const colSize = (columns === 'auto')
? 'auto'
// If CSS supports variables we should use the grid columns var // If CSS supports variables we should use the grid columns var
? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)` : SUPPORTS_VARS ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
// Convert the columns to a percentage by dividing by the total number // Convert the columns to a percentage by dividing by the total number
// of columns (12) and then multiplying by 100 // of columns (12) and then multiplying by 100
: ((columns / 12) * 100) + '%'; : ((columns / 12) * 100) + '%';
return { return {
'flex': `0 0 ${colSize}`, 'flex': `0 0 ${colSize}`,

26
core/src/components/grid/test/sizes/index.html
View File

@ -50,6 +50,32 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<h2 padding-start>Size auto</h2>
<ion-grid>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col size="auto">
<div>
ion-col with extra text to make it auto
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
</ion-grid>
<h2 padding-start>Breakpoint Sizes</h2> <h2 padding-start>Breakpoint Sizes</h2>
<ion-grid> <ion-grid>
<ion-row> <ion-row>