Eclipse Community Forums: BIRT » How to use STYLE in HTML element? It not work

Home » Archived » BIRT » How to use STYLE in HTML element? It not work(I try to make dropdown menu using CSS, but CSS not work.)

Show: Today's Messages :: Show Polls :: Message Navigator

How to use STYLE in HTML element? It not work [message #1244410]

Wed, 12 February 2014 09:41

Martin Simon

Messages: 4
Registered: February 2014

Junior Member

I try to make dropdown menu using CSS, but CSS not work, it seems that is ignored. I try this simple example, but again, styling is ignored. How to include my CSS Style definition into HTML element in BIRT? Are these STYLE tags ignored? This example is from http://www.eclipse.org/birt/phoenix/ref/ROM_Text_SPEC.pdf, but not work.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
  .formLetter { color: red }
</STYLE>

</HEAD>
<BODY>
  <p class="formLetter">Dear Sir, ...</p>
</BODY>
</HTML>

In the browser view, the text is not red Sad

[Updated on: Wed, 12 February 2014 15:31]

Report message to a moderator

Re: How to use STYLE in HTML element? It not work [message #1245271 is a reply to message #1244410]

Thu, 13 February 2014 14:57

donino donino

Messages: 183
Registered: July 2011

Senior Member

It appears a style tag is not supported within an html text element, see this document paragraph 4.5.1

However you should be able to workaround this by defining your css rules in an external css resource, included at view time.

Report message to a moderator

Re: How to use STYLE in HTML element? It not work [message #1245274 is a reply to message #1245271]

Thu, 13 February 2014 15:01

Martin Simon

Messages: 4
Registered: February 2014

Junior Member

Included at view time with Javascript? I tried this, but problem was that modal window informing about report opening did not closed.

I use this piece of code for load CSS:


<HTML>

<script type="text/javascript">
var $ = document; 
var cssId = 'myCss';  
if (!$.getElementById(cssId))
{
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'myStylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}
</script>

<BODY>
  <p class="formLetter">Dear Sir, ...</p>
</BODY>
</HTML>

[Updated on: Thu, 13 February 2014 15:06]

Report message to a moderator

Re: How to use STYLE in HTML element? It not work [message #1245346 is a reply to message #1245274]

Thu, 13 February 2014 17:22

donino donino

Messages: 183
Registered: July 2011

Senior Member

Actually i was thinking to something more native: in the outline view of the designer, if we right-click on the element Styles -> Use css file

We can include a css file from an absolute URI or from the resource path of BIRT. In your case, you need to check the option "Include CSS at view time"

index.php/fa/17468/0/

I hope this helps

Attachment: includeCssViewtime.png
(Size: 17.31KB, Downloaded 7549 times)

[Updated on: Thu, 13 February 2014 17:24]

Report message to a moderator

Re: How to use STYLE in HTML element? It not work [message #1245543 is a reply to message #1245346]

Fri, 14 February 2014 00:12

Martin Simon

Messages: 4
Registered: February 2014

Junior Member

I know that we can include style, I tried it, it can not be applied to HTML field Sad

, only for other visual elements. If I try to use defined names from this CSS in HTML field, it did nothing, like these styles was not visible from HTML field.

[Updated on: Fri, 14 February 2014 00:13]

Report message to a moderator

Re: How to use STYLE in HTML element? It not work [message #1245791 is a reply to message #1245543]

Fri, 14 February 2014 09:16

donino donino

Messages: 183
Registered: July 2011

Senior Member

It works for me Martin,

There is probably an issue with the path of the css file, you should check in the development console of Chrome (or whatever browser you like Smile

) if a valid css link is inserted.

I joined a sample (4.3.1) where the title is an HTML text making use of a css class "ui-widget-header". This class is defined in this external css file, hosted on Google CDN. Here is what we see in HTML format:

index.php/fa/17474/0/