Jump to content

Make row on Tabular Report to move on hover


Recommended Posts

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

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...