'Ionic grid 2 columns where left column in fixed and right column is scrollable

I'm having trouble finding any documentation on how exactly this works. In it's simplest form I want to get the code below to have the left column be stationary (or possibly also scroll independently) and the right column to scroll. This is an Ionic 4 / Angular 11 app.

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col size="6">
    
This column does not scroll
    
    </ion-col>
     <ion-col size="6">
  
This column does scroll when it exceeds screen height
     
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>
htmlangulartypescriptionic-frameworkionic4


Solution 1:[1]

Something like this https://stackblitz.com/edit/ionic-angular-v5-3yiyi7? In a nutshell, it's all in the css: play with overflow-y property and add see if you'd want scrollbar to show or not with display. Also, note the difference between browsers in css.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Misha Mashina

Related Questions