How to achieve v-ripple effect on table rows?

[IO2021]

I hope every row has a ripple effect,
But when I use v-ripple on q-tr,

            <template v-slot:body="props">
              <q-tr v-ripple :props="props" @click="theRow(props)">
                <q-td key="a" :props="props">
                  {{ props.row.a }}
                </q-td>
                <q-td key="b" :props="props">
                   {{ props.row.b }}
                </q-td>
              </q-tr>
            </template>

the effect is not as expected link

How to achieve it? Thanks.

[dobbel]

@maptesting

I made an codepen with q-table and a v-ripple on q-tr. I agree that v-ripple on a q-tr does not work as intended.

https://codepen.io/ontwikkelfabriek/pen/PozZBjb

You could post a github issue about this.

btw v-ripple on a q-td works fine see demo( I put the v-ripple on the first column only):

https://codepen.io/ontwikkelfabriek/pen/BazjPwW

what do you think @metalsadman ? Is this a bug?

[beets]

@dobbel @maptesting you can fix this by applying this css rule:

tr{position:relative;transform: scale(1);}

Note that the ripple directive requires the element have a position relative, but I guess per spec, position relative on a tr is undefined. The transform part is a hack to make it work though. I’m not sure I’d rely on this, but I don’t know if there’s another way. I also only tested in chrome, so if this is used in production, please test it on other browsers.

[dobbel]

@beets @maptesting

yes that fixes the ripple on the tr. Thanks! I updated the codepen with your css.

[IO2021]

@dobbel @beets
Works perfectly!!!
Save my life, thank you.