Focal Point
[Workaround] HTML 'Embedded CSS' tab reformats the CSS code when it should NOT

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/5167033196

May 29, 2019, 02:42 PM
Hallway
[Workaround] HTML 'Embedded CSS' tab reformats the CSS code when it should NOT
Does anyone know how to turn off the auto formatting in the Embedded CSS tab in the crAppStudio HTML Can't-vas? I'm trying to add an svg as a background-image and the following code is valid CSS:
  
.btn-right {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/><path fill='none' d='M0 0h24v24H0V0z'/></svg>");
}

This should return this image in my background:

But crAppStudio wants to reformat the CSS at the semicolon and it turns into this:
  
.btn-right {
 background-image: url("data:image/svg+xml;
 utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/><path fill='none' d='M0 0h24v24H0V0z'/></svg>");
 }

Which, of course, breaks the CSS. *Sigh*

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
May 29, 2019, 03:12 PM
Hallway
IBI work-around #561,793

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
May 29, 2019, 05:32 PM
Waz
Just an extra piece of info.

In the embedded JS, if the characters
</
are found, is causes a cr to be embedded.

Looks like is may be related.

JS solution was to split the text out.
e.g. was
</
is now '<'+'/' etc

As this is CSS can't do that.

I would suggest creating an external CSS file, and link it into your page. The best part is that its reusable.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

May 29, 2019, 07:50 PM
Hallway
quote:
Originally posted by Waz:
Just an extra piece of info.

In the embedded JS, if the characters
</
are found, is causes a cr to be embedded.

Looks like is may be related.

JS solution was to split the text out.
e.g. was
</
is now '<'+'/' etc

As this is CSS can't do that.

I would suggest creating an external CSS file, and link it into your page. The best part is that its reusable.


Interesting. That explains some other issues that I was facing where it would put the closing svg tag on a new line. But only sometimes. This is the MOST AGGRAVATING tool IMHO. Why even put in a 'Embedded CSS' tab? It obviously doesn't work.

I agree with using an external CSS file. That works without a hitch.

Thanks Waz


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
May 29, 2019, 08:02 PM
Waz
I had created a case for this, but at the time I didn't know what the cause was.

Should reopen it or create a new one.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

May 29, 2019, 08:09 PM
Hallway
quote:
Originally posted by Waz:
Just an extra piece of info.

In the embedded JS, if the characters
</
are found, is causes a cr to be embedded.



Thanks to the ES2015 specification, I have found that using template literals corrects this issue as template literals allow for multi-line strings and can even contain placeholders and expressions. Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes.

Try these examples in the console of a *MODERN browser. ( *RIP Internet Explorer )

console.log(`
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
   <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="white"/>
</svg>`);


var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);



More here: https://developer.mozilla.org/...ce/Template_literals

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
May 29, 2019, 08:29 PM
Waz
Awesome.

Will check it out


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!