ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.13k stars 13.5k forks source link

bug: grid breakpoints based on window causing grid to be wrong in modal #23203

Open conde2 opened 3 years ago

conde2 commented 3 years ago

Bug Report

Ionic version:

[ ] 4.x [x] 5.6.4

Current behavior: The grid sizing is relative to the screen size.

Expected behavior: The grid sizing be relative to the modal size.

Steps to reproduce: Use the code given to createa component, open a modal window with the given component, check in the console the calc is using 4 instead of 6.

Related code:

  <ion-grid fixed>
      <ion-row>
        <ion-col size-sm="6" size-md="6" size-lg="4">
        </ion-col>
        <ion-col size-sm="6" size-md="6" size-lg="4">
        </ion-col>
        <ion-col size-sm="6" size-md="6" size-lg="4">
        </ion-col>
    </ion-row>
  </ion-grid>

Other information:

Ionic info:

[WARN] Error loading @capacitor/core package.json: Error: Cannot find module '@capacitor/core/package'

       Require stack:
       - C:\Users\joao_\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\joao_\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\joao_\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\joao_\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI                     : 6.12.4 (C:\Users\joao_\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.4
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.2.4
   @angular/cli                  : 11.2.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : not installed
   @capacitor/core : not installed

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.10
   OS     : Windows 10
liamdebeasi commented 3 years ago

Thanks for the issue. I can reproduce this behavior. The issue looks like we are checking breakpoints on the window rather than on the modal: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/media.ts#L13-L21

conde2 commented 3 years ago

@liamdebeasi is there any priority issues schema or roadmap that I can follow to see when this issue will be worked on?

liamdebeasi commented 3 years ago

The Ionic Core Project Board shows what we are working on right now (in progress, in review, merged, etc).

The milestones also give you an idea of which release a particular commit will be a part of: https://github.com/ionic-team/ionic-framework/milestones.

conde2 commented 3 years ago

Thanks! Will follow it.

ralphcode commented 4 months ago

+1