Ng-Client style issues

Forum to discuss the new web client version of Servoy.

Ng-Client style issues

Postby Gordon McLean » Tue Apr 19, 2016 3:09 pm

Hi

I have a multi module solution with a main stylesheet attached to all modules. I am then importing using @import url("servoy.css"); a style sheet specifically to deal with the servoy structure i.e. say-body, say-label etc The objective is to reuse this on several other projects. The import works and the process is appears to be as expected

The issue, and this may be my css error, is I am unable to set more than one style to work in this imported document.

Code: Select all
.svy-body {
   background-color:blue;
};

.svy-label {
   background-color:red;
   focus {outline: none};
};


By using the above I was expecting to see a blue background with a red label ?? this is not happening. If I reverse the order with .svy-label first I get a red label and a white body background, as if .svy-body is being ignored ??

Secondly the focus {outline:none}, is not working at all, I still get the blue trim around the labels when they are clicked ??

Any help with this would be appreciated

Cheers
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 218
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Ng-Client style issues

Postby paronne » Tue Apr 19, 2016 3:23 pm

Hi Gordon,

your style should be like this:

Code: Select all
.svy-body {
   background-color:blue;
};

.svy-label {
   background-color:red;
};

.svy-label:focus {
   outline: none;
}


to color the text of a label you should use color: red;
If the text is not being color as red is possible that a more selective rule is overriding your .svy-label. Best way to inderstand is to use the Browser inspector and see which rule is setting the color of the text, then write a more selective rule which will overrule it.
For the focus you should use the selector .svy-label:focus {...} instead. See how focus is used in css http://www.w3schools.com/cssref/sel_focus.asp
paronne
 
Posts: 107
Joined: Fri Nov 02, 2012 3:21 pm

Re: Ng-Client style issues

Postby Gordon McLean » Tue Apr 19, 2016 3:29 pm

Hi Paolo

I have just tried that and I am getting exactly the same result ?? i.e. blue background, no label colour if I swap body and label styles round in order I get a red label and a white body ??

I will try a test file and make sure its not an issue associated with my solution

Thanks
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 218
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Ng-Client style issues

Postby Gordon McLean » Tue Apr 19, 2016 3:33 pm

I have attached a sample showing the css in a raw file with the body background overriding the label background - which I would not have expected. The outline:none does not appear to function either ??

Best
Gordon
You do not have the required permissions to view the files attached to this post.
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 218
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Ng-Client style issues

Postby paronne » Tue Apr 19, 2016 3:35 pm

Hi Gordon,

there is a typo in the CSS. Sorry i have copy pasted you same typo from your CSS.
You should add ';' at the end of the rule:

Code: Select all
.svy-label {
   background-color:red;
}

.svy-body {
   background-color:blue;
}
.svy-label:focus {
   outline: none;
}


because of the typo the css following
Code: Select all
[code].svy-body {
   background-color:blue;
};

is ignored
paronne
 
Posts: 107
Joined: Fri Nov 02, 2012 3:21 pm

Re: Ng-Client style issues

Postby Gordon McLean » Tue Apr 19, 2016 3:45 pm

.... that was stupid of me sorry to waste the bandwidth :oops:
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 218
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Ng-Client style issues

Postby bcusick » Sun May 13, 2018 6:26 pm

How do we stop the outline on the .svy-htmlarea ??

It seems like the ".svy-htmlarea:focus" is not a thing...
Bob Cusick
bcusick
 
Posts: 1210
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Ng-Client style issues

Postby ROCLASI » Mon May 14, 2018 12:50 am

Hi Bob,

Try adding !import behind the property you want to set.
That should override any other stylesheet touching that property for that class.

Hope this helps.
Robert Ivens
ROCLASI Software Solutions / JBS Group, Partner
SAN Developer / Servoy Valued Professional / Servoy Certified Developer
Twitter: @roclasi / @servoyforge
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5274
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Ng-Client style issues

Postby bcusick » Mon May 14, 2018 5:14 pm

Hey Robert - wow, thanks. I'll give it a try!

Also - is it the same with the alignment - (e.g. text-align: right;) ?

In the WebClient - the horizontal alignment was handled at the CONTAINER (field) level property (non-editable HTML Area).... in NG it seems to do nothing?
Bob Cusick
bcusick
 
Posts: 1210
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Ng-Client style issues

Postby ROCLASI » Mon May 14, 2018 6:21 pm

Hi Bob,

ROCLASI wrote:Try adding !import behind the property you want to set.


I see I made a typo here...it should be !important.
And yes it should work on any property. Of course I don't know what will happen when multiple styles use the !important directive on the same element.
Robert Ivens
ROCLASI Software Solutions / JBS Group, Partner
SAN Developer / Servoy Valued Professional / Servoy Certified Developer
Twitter: @roclasi / @servoyforge
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5274
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Ng-Client style issues

Postby bcusick » Mon May 14, 2018 7:31 pm

I'll try it out later today - and let you know what happens.... :D
Bob Cusick
bcusick
 
Posts: 1210
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Ng-Client style issues

Postby bcusick » Tue May 15, 2018 1:55 am

Hey Guys,

NO LUCK! I have tried everything that I can think of - and I KNOW it's just "stupid user detected" error - but I CANNOT get the outline of the HTML Area to disappear.

A LABEL - works fine. The HTML area is screwed (see picture below).

ng_html_area_outline_screwed.jpg


Also - in WebClient - the horizontal alignment property of the field would move the contents of the entire field. NOT SO in NG. So, I made:

Code: Select all
.svy-htmlarea.right {
     text-align: right;
}


That doesn't work - because when I try to add another style to the html area - it breaks the first style - and there is no bootstrap component for the HTML area.

IDEAS??? SORRY in advance!
You do not have the required permissions to view the files attached to this post.
Bob Cusick
bcusick
 
Posts: 1210
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: Ng-Client style issues

Postby bcusick » Tue May 15, 2018 10:47 pm

FOUND THE SOLUTION!

My field had a class on it (from the WebClient) called "noborder".

Once I took off that styleClass, and changed the main style (on the form) to this:

Code: Select all
.svy-htmlview:focus,
.svy-htmlview span:focus {
   outline:none;
}


THEN I put the styleClass of "noborder" BACK on the field - all works!
Bob Cusick
bcusick
 
Posts: 1210
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests