Make row on Tabular Report to move on hover

[futurist]

Hi y'all,

 

I've been playing around with CSS on Tabular Report and I discovered this trick where you can make the rows on a Tabular Report to move when hovered over, which can be handy for user experience when you want your users to know which record they're hovering over. Thought of sharing this in case anyone is curious to try.

On the Configure Results Page Fields screen, add a Header and Footer, select the Header (make sure to disable the HTML editor), and paste the following:

<style>

.cbResultSetDataRow:hover{
position: relative;
left: 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
</style>
 

The position: relative is necessary. You can change the value of the left to how much you want the row to move (you can even use top, bottom, and right). The box-shadow is optional; I just added that in to give more emphasis on the hovered record.

Sample URL: https://c1hch576.caspio.com/dp/db26a00094bc87bd21054559ae87