Good afternoon everyone, I have a question.
I'm looking to implement some custom CSS (or any other way) that enables the cursor to change to a different icon with a hover over. I'm aware that this can be done through title headings on the tables that are built through the accelerators, but i have interactive elements with the table that are not headings, and are just plain text, once clicked these go to a sperate page.
I have instructions to keep the text plain so i can't change them to headings like i can with the column headings (its a shame as they already have a on cursor change from the standard mouse icon to a hand) so i was wondering if there was a way that i could extract that CSS and put it onto the standard free text just to make it more user friendly. Below are some screenshots of what i mean.
This image showcases the cursor type of the table's contents by default, this text is interactive, but the cursor does not represent that. This is a row heading on the same table, the styling of the cursor has changed once its hovering over the column name. Any and all suggestions into how i can replicate this would be appreciated, thank you!
Hi Morgan,
One of the approach is to define the below CSS style class def and reference the same style class in the Text widget Style Classes property.
CSS Snippet:
.pointer-cursor:hover { cursor: pointer; }
Demo app: CSS_PointerCursorTask
Kind regards,
Benjith Sam
Hi Benjith, thanks for your response. Currently I have only the contents of the table as expressions, and I can't seem to apply the same style classes to them. It seems that no matter the style classes, it remains the same.
My table view in the widget tree
current CSS implementation
You wrote that these expressions need to link to another screen. By adding the link to the expression, doesn't it automatically add the cursor as well? Easiest way to implement: right-click on the expression, and in the context menu select "link to".
For completion (in case anyone wants the cursor changed without a link), there are 2 ways to do this. Either you wrap the expression in a container and put that suggested "pointer-cursor" class on the container. Or you can have multiple css classes on your expression, just separate them with a space. "text-align-left pointer-cursor"
Hi Tim, thanks for getting back to me, truthfully i didn't build this page so not too sure how it works, but there is no link attached to the table contents however it does open a new page that is shown within the overview.
This is all the contents of the table elements.
If I apply the CSS classes that you suggested, they don't seem to go through to the web page after I compile the module. classes as per your implementation. When i hover over the words in the table, i still get the same icon as shown in the first image of the first post in the thread, indicating that i can highlight the text, is there something that is overwriting this?
CSS reading as correct in web page after compilation, but still not reflected when tested?
If you created the css class as Benjith Sam suggested, then it should be working. Unless there is another css statement overriding it somewhere.
Can you check with browser tools to see if other css statements are affecting it?
I edited my last comment to reflect this, it seems its "correct" in the sense that it being read, but its not being displayed, indicating that somewhere its being overwritten :/
Fixed! The application had its own theme that didn't have the class defined, adding into the theme, refreshing the dependencies and then applying made it work, sorry for taking up all of your time!
No worries. Having a second pair of eyes never hurts, and it might help other devs in the future as well.