[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:
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
Just use a good old fashioned text editor of choice to create the CSS file to CSS3 standards
Place said file in the directory of choice
Reference said file in HTML Can't-vas
Completely forget about the 'Embedded CSS' tab because it is worthless.
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.04
Upgrade:
WebFOCUS 8.2.07
OS:
Linux
Outputs:
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.04
Upgrade:
WebFOCUS 8.2.07
OS:
Linux
Outputs:
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}.`);