Ion-grid-columns does not work on Windows 10

Ionic Framework
1

Hi,

I have developed an app (Ionic/Cordova/Angular) based on 18 columns in the grids using “–ion-grid-columns: 18” in variables.scss. I have recently tried to support Windows as a platform as well but this setting seems to be ignored. I have verified the scenario by creating a testapp " ionic start testApp blank --type angular", added Windows “ionic cordova platform add windows”. I just added a grid with six columns of size 3 to home.page.html:

<ion-grid width="100%">
  <ion-row>
    <ion-col size="3"> Column 1 </ion-col>
    <ion-col size="3"> Column 2 </ion-col>
    <ion-col size="3"> Column 3 </ion-col>
    <ion-col size="3"> Column 4 </ion-col>
    <ion-col size="3"> Column 5 </ion-col>
    <ion-col size="3"> Column 6 </ion-col>
  </ion-row>
</ion-grid>

and modified variables.scss as described. Using “ionic serve” the six columns are perfectly displayed in the same row, while “ionic cordova run windows” displays 4 columns in the same row and columns 5 and 6 are placed in a separate row.

Any ideas?

Cheers
Friedemann

2

What do the styles in the dev tools look like? Also what version of windows are you using? Last time I had check, window’s native webview was based on IE11, which we do not support, so that could be the issue

3

Version info:
Windows 10 Pro 19041.630
Edge 86.0.622.69
Did not check the dev tools.
However, migrated to capacitor and electron and everything works fine

1 Like