ion-ripple-effect is not working

Bug Report

Ionic version:

[x] 4.x

Describe the Feature Request ion-ripple-effect not working with ion-col, its just getting omitted from the html and hides the ion-col element

Describe Preferred Solution ion-ripple-effect should add ripple effect to ion-col element as referred in the docs https://ionicframework.com/docs/api/ripple-effect

Describe Alternatives

Related Code

<ion-grid>
     <ion-row>
       <ion-ripple-effect>
         <ion-col
           size-md="4"
           size-xs="12"
           size-sm="6"
           size-lg="4"
           *ngFor="let item of pendingitems"
         >
           <ion-card text-left>
          </ion-card>
         </ion-col>
       </ion-ripple-effect>
     </ion-row>
   </ion-grid>

Additional Context

[brandyscarney]

I updated the documentation for ripple effect to include steps on adding the CSS and class: https://github.com/ionic-team/ionic/blob/master/core/src/components/ripple-effect/readme.md

I think the extra CSS is something we could add to .ion-activatable in the ionic CSS. We could possibly add the class by default to the ripple parent, but I think being able to toggle this class with a disabled element gives the user more control.

[brandyscarney]

There are two reasons this doesn’t work:

1. The ion-ripple-effect needs the parent element to have position: relative because it is absolutely positioned, otherwise it will just go over everything on the page.
2. It looks for the ion-activatable class on the parent element because we use this to determine whether or not an element is clickable.

I’ve updated the Codepen from @robingenz to show it working with the div: https://codepen.io/ionic/pen/PoYQMzO

Note: I also added user-select: none to avoid selecting the text in the div on click

I believe this could just be a documentation issue.