NGClient stylesheet using

Classic Servoy
1

I have a default css stylesheet set in the Solutions Properties “styleSheet” (default.css) and an other/different stylesheet set in the Module Solution Peroperty “styleSheet” (login.css).
In both stylesheets are different settings for i.e. “.svy-button”.
Why does the css settings from the Module stylesheet styles (overwrites) the buttons on forms of the main solution and not only on Module forms?

Servoy 8.2.3

2

In the browser you have a lot of different stylesheets that are all used at the same time. Some rules decide what is actually applied (like the order in which style sheets are loaded). There is no such thing as a module in the browser. Just a bunch of elements and a bunch of style sheets. So in short: when in the html there are a bunch of svy-button elements and you have several svy-button declarations in different style sheets, one of those declarations will be applied to all svy-button elements.

3

Thank you Patrick for your explanation.

An other mystery for me is where this style attributes are coming from? Not from my stylesheets.
[attachment=0]styleClass.png[/attachment]

Is there any documentation about all the Servoy NGClient CSS specifications, except what I find at “Styling in the NGClient”.

styleClass.png
styleClass.png571×277 18.5 KB

4

The simple style:

.svy-button
{
    font-size: 11pt;
    font-weight: normal;
    background-color: #fff;
    
}
.svy-button:hover
{
    background-color: lightblue;
    cursor: pointer;
}

is not working.

The Label/Button property “styleClass” and “rolloverCursor” is set as “Default”.
A simple button on the form gets the lightblue background-color on hover, but don’t changes the mousecursor to a pointer.
This will only work when I set the Label/Button property “rolloverCursor” to “Hand”.

What goes wrong?

5

Maybe overwritten by something more specific? Could you check in the inspector of your browser what classes are applied, where they come from and what cursor is set on hover?

6

This is working:

.svy-button:hover
{
    background-color: lightblue;
    cursor: pointer !important;
}

In the future I will first check the inspector of the browser.

7

Servoy does define an in-line style which will override all classes. It seems for buttons this is:

element.style {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
}

I think only !important will work for these properties.
You can see the in-line style in the DOM inspector → styles → at the top

8

Inline styles will always win, yes. And the inspector is your friend for these kinds of questions. The more relevant CSS becomes in your solution, the more it’s worth to understand what’s being applied why. Without a tool like the inspector that becomes really difficult…