How to apply css file to html content within HTML widget?

[July]

Hello:

At client side my page contain a com.google.gwt.user.client.ui.HTML, this HTML will contain a large number of <div> and each <div> is associated with its own style. all the styles are defined in another css file.

My question is how to apply the style to the HTML content?

i use

<g:HTML ui:field="myfield" styleName="project_entry.css" />

but it does not work.

Thanks.

[swathi]

try like this:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:gwt='urn:import:com.google.gwt.user.client.ui'>
<ui:style src="project_entry.css" />

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/bGL4yPbtpY4J.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.

[July]

Thanks for the reply, this is what i do, however no effect.

it will generate html like:

<div class="project_entry.css">

...

</div>

but it will not apply the style from the file to the div element automatically. 

Do i have to style each class in the <div> one by one?

On Wednesday, May 30, 2012 9:44:20 PM UTC+8, Ashu wrote:

try like this:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns:gwt='urn:import:com.google.gwt.user.client.ui'>
        <ui:style src="project_entry.css" />

On Wed, May 30, 2012 at 6:55 PM, July <july...@gmail.com> wrote:
> Hello:
>
> At client side my page contain a com.google.gwt.user.client.ui.HTML, this
> HTML will contain a large number of <div> and each <div> is associated with
> its own style. all the styles are defined in another css file.
>
> My question is how to apply the style to the HTML content?
> i use
> <g:HTML ui:field="myfield" styleName="project_entry.css" />
>
> but it does not work.
>
> Thanks.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/bGL4yPbtpY4J.

> To post to this group, send email to google-web-toolkit@googlegroups.com.

> To unsubscribe from this group, send email to

> google-web-toolkit+unsub...@googlegroups.com.

[Joseph Lust]

July,

Any tag in a UiBinder can have a CSS class, but:

• Native HTML tags like <div> must use their "class" attribute. So <div class="somClass"/>
• GWT classes, like <g:HTML /> must use the "styleName" attribute, since otherwise there would be a conflict with the Java "class" keyword, so use <g:HTML styleName="someClass"/>

Don't use the CSS filename in these tags.

Include you CSS file via either:

• <ui:style src="project_entry.css" />  in the top of the UiBinder file OR
  
• <stylesheet src=" project_entry.css"/> in your project module file.

Sincerely,
Joseph

[July]

I solved this by using ClientBundle.

[July]

And thanks for the explanation  Joseph Lust , that's helpful.