Ng-Client style issues

Classic Servoy
1

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.

.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

2

Hi Gordon,

your style should be like this:

.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

3

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

4

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

StyleTest.png
StyleTest.png1196×644 69.8 KB

5

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:

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

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

because of the typo the css following

[code].svy-body {
   background-color:blue;
};

is ignored

6

… that was stupid of me sorry to waste the bandwidth :oops:

7

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

It seems like the “.svy-htmlarea:focus” is not a thing…

8

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.

9

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?

10

Hi Bob,

ROCLASI:
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.

11

I’ll try it out later today - and let you know what happens… :D

12

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).

[attachment=0]ng_html_area_outline_screwed.jpg[/attachment]

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:

.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!

ng_html_area_outline_screwed.jpg
ng_html_area_outline_screwed.jpg301×184 10.8 KB

13

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:

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

THEN I put the styleClass of “noborder” BACK on the field - all works!