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

42 views
Skip to first unread message

July

unread,
May 30, 2012, 9:25:18 AM5/30/12
to google-we...@googlegroups.com
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.
Message has been deleted

swathi

unread,
May 30, 2012, 9:44:20 AM5/30/12
to google-we...@googlegroups.com
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

unread,
May 30, 2012, 11:12:07 AM5/30/12
to google-we...@googlegroups.com
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

Joseph Lust

unread,
May 30, 2012, 12:36:40 PM5/30/12
to google-we...@googlegroups.com
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

unread,
May 30, 2012, 10:23:57 PM5/30/12
to google-we...@googlegroups.com
I solved this by using ClientBundle.

July

unread,
May 30, 2012, 10:26:08 PM5/30/12
to google-we...@googlegroups.com

And thanks for the explanation  Joseph Lust , that's helpful.
Reply all
Reply to author
Forward
0 new messages