Hello folks,
I want to set the hover property to a button through the CSS but I think Servoy does not implement this functionality.
I am implementing the correct hover property but it does not work.
For eg:
button:hover{
font-size: 20px;
}
Can anyone help me on this…??
Please reply.
Regards,
Ron!
Ron ,
Hover is not supported in servoy style sheet , but it can be done using webclient utils plugin in servoy webclient .
create a stylesheet Nav-hover.css in Root Folder
with this line
.main-tab { background-color:#d0dada; }
.main-tab:hover { background-color:#ffffff; }
On startup of solution use this
plugins.WebClientUtils.addCssReference('http://localhost:8080/Nav-hover.css');
On Show of form use this
plugins.WebClientUtils.setExtraCssClass(YourElement,'main-tab');
Nirav
Hi Nirav,
thanks for your prompt response.
After following your code, this is what I am doing?
function onShowForm(){
plugins.WebClientUtils.addCssReference('http://localhost:8080/ron.css');
plugins.WebClientUtils.setExtraCssClass(elements.submit,'ron.css');
}
Am I doing it right? ron.css is my css file. I dont know whether I am giving the proper parameters.
I run the code but there is no error.
Please reply.
Best Regards,
Ron!
plugins.WebClientUtils.setExtraCssClass(elements.submit,'ron.css'); // ron.css is the style sheet, needs to be a style in the style sheet
Hi David,
Thanks for correcting me. Initially, I also tried that.
This is how I have coded my css file.
ron.css file
field.text {
border-style: solid;
border-width: 2px;
text-align: left;
}
text:hover {
background-color: #0000FF;
}
Now, the line of code that I am using is: ```
plugins.WebClientUtils.setExtraCssClass(elements.Name, ‘text:hover’);
Also, can you please explain how to implement the following code "on the start up of the solution":
plugins.WebClientUtils.addCssReference(‘http://localhost:8080/ron.css’);
Thanks a lot again for your responses Nirav and David!
Ron!Look at the difference between your code and Nirav’s code. You are not defining or referencing the css style correctly.
“on the start up of the solution”…select the activated module in Servoy developer and look at the properties view. A number of solution specific events there (startup, shutdown, etc).
Hi David,
Thanks again for your help.
Please have a look on the snapshot that is attached below:
When I see the properties view, there is no mention of solution specific events such as startup or shut down.
However, I have seen startup and shut down when I go to the preferences section under the window tab.
I just do not feel like leaving this at this point because it is very important for me to show this to my project leader.
Thanks for your continuous help.
Regards,
Ron!
Looks like you found what I was referring to.
Hi David,
Thanks for that.
Where should I keep my css file. Currently, its in the Styles folder where all other css files are, but Nirav asked me to put it in the root folder.
Can you help me find where it is? Is it somewhere in the ‘application server’ folder?
C:\Servoy\application_server\server\webapps\ROOT
I hope you would not mind this stupid question.
Thanks,
Ron.
This call: plugins.WebClientUtils.addCssReference(‘http://localhost:8080/Nav-hover.css’)
Corresponds to location C:\Servoy\application_server\server\webapps\ROOT\Nav-hover.css
Note that “localhost” will need to change when your solution is deployed.
Hi all:
I’ve played around this (webclient utils plugin is very exciting!) and I’ve seen some interesting stuff:
This code:
plugins.WebClientUtils.addCssReference('nav-hover.css'')
Corresponds to this location: C:/servoy/application_server/server/webapps/ROOT/servoy-webclient/nav-hover.css. You don’t have to define the complete url (‘http://localhost:8080…’).
If you put this in nav-hover.css file:
.main-tab:hover {color: red;}
You don’t see the element in red color when you pass the mouse over it. This is because if the element (or label/file/button…) has a default color, it overrides the color you set in the file. You have to code like this:
.main-tab:hover {color: red !important;}
You have to add !important at the end (but before the ;)
Regards,
Are there ways to display a label as a hyperlink in smart client?
maria.kyselova:
Are there ways to display a label as a hyperlink in smart client?
Not by default. Smoke and mirrors to get the browser behavior – you have to use two elements: your text label and then an image placed on top of the text label. The image object has an underline one pixel wide and however tall you want the rollover to be as the rollover image media property (don’t need the regular imageMedia property). Stretch image object to size and place on top of the text object. Then attach whatever methods to the image object instead of the text object.
david:
maria.kyselova:
Are there ways to display a label as a hyperlink in smart client?Not by default. Smoke and mirrors to get the browser behavior – you have to use two elements: your text label and then an image placed on top of the text label. The image object has an underline one pixel wide and however tall you want the rollover to be as the rollover image media property (don’t need the regular imageMedia property). Stretch image object to size and place on top of the text object. Then attach whatever methods to the image object instead of the text object.
Yeah, smoke and mirrors indeed.
Thanks, David.
The way to show a label as hyperlink is just setting the text of the label to a bit of HTML that contains a hyperlink, like:
<html><a href="#">test</a></html>
You assign your action method to the onAction of the label and uncheck the showClick checkbox.
You won’t get the behavior that David refers to where the underline is hidden when you don’t hover over the link, but from a UX point of view it is debatable if you want that behavior: Links should look like links, so always underlined
Paul
pbakker:
The way to show a label as hyperlink is just setting the text of the label to a bit of HTML that contains a hyperlink, like:<html><a href="#">test</a></html>You assign your action method to the onAction of the label and uncheck the showClick checkbox.
You won’t get the behavior that David refers to where the underline is hidden when you don’t hover over the link, but from a UX point of view it is debatable if you want that behavior: Links should look like links, so always underlined
Paul
You’re my hero.
Thanks, Paul.
pbakker:
The way to show a label as hyperlink is just setting the text of the label to a bit of HTML that contains a hyperlink, like:<html><a href="#">test</a></html>You assign your action method to the onAction of the label and uncheck the showClick checkbox.
You won’t get the behavior that David refers to where the underline is hidden when you don’t hover over the link, but from a UX point of view it is debatable if you want that behavior: Links should look like links, so always underlined
Paul
Paul, the hyperlink implemented in the way you suggested is the standard bright blue colour.
Can I apply a different colour to it?
Doesn’t fit in my theme otherwise.
Also, I’ve tried a few options but my i18n’ed label won’t translate properly if I put it inside html tags?
pbakker:
The way to show a label as hyperlink is just setting the text of the label to a bit of HTML that contains a hyperlink, like:<html><a href="#">test</a></html>You assign your action method to the onAction of the label and uncheck the showClick checkbox.
You won’t get the behavior that David refers to where the underline is hidden when you don’t hover over the link, but from a UX point of view it is debatable if you want that behavior: Links should look like links, so always underlined
Paul
Paul, i18n doesn’t seem to work on the label in this solution.