Stylizing HTML_AREA with CSS?

Classic Servoy
1

Is it possible to stylize elements in HTML_AREA using Servoy CSS? For example there is an HTML_AREA with tags and

which I would like to stylize using a CSS sheet. How do I do it? I can stylize the tags by including tag to the HTML_AREA content but it makes is more difficult to control/modify.

This page doesn’t seem to provide an answer:
https://wiki.servoy.com/display/public/ … g+with+CSS

2

bump.

Another question regarding this subject: is it possible to read content of a Servoy Styles file into a variable so it may be included into content of HTML_AREA?

thnx.

3

Hi Sergei Sheinin,

One possible solution can be, to add an external CSS file reference. But this will only work in web client.

  1. Create one external css file as of your requirement. You can also drag it to the Servoy media section, to add it to your project.
p.myred {
   color: red;
}
p.uppercase {
    text-transform: uppercase;
}
  1. Add this css reference on solution open. Requires web client utils plugin.
plugins.WebClientUtils.addCssReference("media:///external_css.css")
  1. Now you can use the css classes inside your application.
str = '<html><body>\
			<p class=uppercase>This is in uppercase</p>\
			<p class=myred>This is red class</p>\
			</body></html>'
4

Thank you for the suggestion, it is very practical. However it must work in both Smart and Web client (sorry I forgot to mention it).

I am contemplating this solution:

  • Create a “scopes.ui.htmlCSS” JS object which with css data and method:
htmlCSS = {

cssData = {
header = "font-size: 10px, font-weight: bold...",
row = "font-size: ....."

...etc...
}

function getCSS(){
  // parse this.cssData into a valid <style>...cssData...</style> string.
  • Use it in code as follows:
str = '<html><body>'+scopes.ui.htmlCSS.getCSS()+'\
         <table><tr><td class="header">This is in uppercase</td></tr>\
          <tr><td class="row">This is red class</td></tr></table>\
         </body></html>'

Please share any suggestions/improvements.

Question to Servoy: is Smart client equivalent for plugins.WebClientUtils.addCssReference() planned in future releases?

thnx.