NGClient stylesheet using

Forum to discuss the new web client version of Servoy.

NGClient stylesheet using

Postby tgs » Wed Mar 28, 2018 11:28 pm

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
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 845
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: NGClient stylesheet using

Postby patrick » Thu Mar 29, 2018 11:32 am

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3646
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: NGClient stylesheet using

Postby tgs » Thu Mar 29, 2018 1:49 pm

Thank you Patrick for your explanation.

An other mystery for me is where this style attributes are coming from? Not from my stylesheets.
styleClass.png


Is there any documentation about all the Servoy NGClient CSS specifications, except what I find at "Styling in the NGClient".
You do not have the required permissions to view the files attached to this post.
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 845
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: NGClient stylesheet using

Postby tgs » Thu Apr 12, 2018 12:20 pm

The simple style:

Code: Select all
.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?
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 845
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: NGClient stylesheet using

Postby patrick » Thu Apr 12, 2018 12:39 pm

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?
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3646
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: NGClient stylesheet using

Postby tgs » Thu Apr 12, 2018 1:34 pm

This is working:

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


In the future I will first check the inspector of the browser.
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 845
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: NGClient stylesheet using

Postby sean » Fri Apr 13, 2018 3:44 pm

Servoy does define an in-line style which will override all classes. It seems for buttons this is:
Code: Select all
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
Software Engineer
Servoy USA
sean
 
Posts: 97
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: NGClient stylesheet using

Postby patrick » Sat Apr 14, 2018 11:37 am

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...
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3646
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 1 guest