Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [Workaround] HTML 'Embedded CSS' tab reformats the CSS code when it should NOT
Go
New
Search
Notify
Tools
Reply
  
[Workaround] HTML 'Embedded CSS' tab reformats the CSS code when it should NOT
 Login/Join
 
Guru
posted
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
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 431 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Guru
posted Hide Post
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
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 431 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Expert
posted Hide Post
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.05OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6104 | Location: Land of the Darug people, Terra Australis Incognita | Registered: October 31, 2006Reply With QuoteReport This Post
Guru
posted Hide Post
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
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 431 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Expert
posted Hide Post
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.05OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6104 | Location: Land of the Darug people, Terra Australis Incognita | Registered: October 31, 2006Reply With QuoteReport This Post
Guru
posted Hide Post
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
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 431 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Expert
posted Hide Post
Awesome.

Will check it out


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.05OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6104 | Location: Land of the Darug people, Terra Australis Incognita | Registered: October 31, 2006Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [Workaround] HTML 'Embedded CSS' tab reformats the CSS code when it should NOT

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.