Jump to content
  • 0

Hover color change for column headings in DataPage tables


Smart-Plex

Question

I'm a new Caspio client so I may have missed it. Is there a way to specify a \"hover color\" for individual column headings? It appears that there is not. The only thing I have found is a hover color for the entire header bar at the top of a datapage in table format.

A hover color for individual column headings would be very useful (more so than having the entire header bar light up).

If this is not available, how does a Caspio client make a request for a new feature/function such as this, and how do I hear if/when it will be available?

Thanks, Eric

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Yes of course anything is possible!

In order to do something like this in javascript you would need to grab the table then the specific row and then the loop through all td tags in that row. Once your inside this loop you can set the background/hover color as you wish.

The script to write something like this is quite involved.

Link to comment
Share on other sites

  • 0

One workaround for this is modifying the Style of your DataPage. You can add in the User-Defined Styles something like this: 

.cbResultSetHeaderCell:hover
{
	background: red;
}

This won't highlight the entire header bar.

 

As for requesting a new feature, you can visit their Ideabox (http://ideabox.caspio.com) to communicate with their product team and for others to vote.

Link to comment
Share on other sites

  • 0

Hi! Just to update this post, if you want to add a background color to individual column headings of your report when hovered, you can paste the CSS code below to the header of your DataPage. 

<style>
.cbResultSetHeaderCell:nth-child(1):hover{
background: red !important; 
}
.cbResultSetHeaderCell:nth-child(2):hover{
background: green !important; 
}
.cbResultSetHeaderCell:nth-child(3):hover{
background: yellow !important; 
}
.cbResultSetHeaderCell:nth-child(4):hover{
background: violet !important; 
}
</style>

If you have a lot of columns, just copy the same class .cbResultSetHeaderCell:nth-child(1):hover and change the nth-child number based on the order number of the column. 

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
Answer this question...

×   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...
×
×
  • Create New...