Include CSS in XML or HTML affects the output?

hezjing

unread,

Jul 3, 2009, 11:58:32 AM7/3/09

to gwt

Hi

I want to customize the color and font size of the StackPanel item, so I defined the following style:

.mymenu .gwt-StackPanelItem {

color: blue;

font-size: small;

}

Then I add the above style and keep the rest of the standard CSS properties:

StackPanel panel = new StackPanel();

panel.addStyleName("mymenu");

The problem is this only works if I include the CSS in the module XML file.

If I include the CSS in the HTML host page, the style is overridden by standard.css.

Both methods above generate the same HTML shown below:

<tbody>

<tr>

<div>Administration</div>

</td>

</tr>

...

</table>

Do you know why including the CSS in the module XML or HTML host page affects the output?

--

Hez

Thomas Broyer

unread,

Jul 3, 2009, 6:18:29 PM7/3/09

to Google Web Toolkit

On 3 juil, 17:58, hezjing <hezj...@gmail.com> wrote:
> Hi
> I want to customize the color and font size of the StackPanel item, so I
> defined the following style:
>
> .mymenu .gwt-StackPanelItem {
> color: blue;
> font-size: small;
>
> }
>
> Then I add the above style and keep the rest of the standard CSS properties:
>
> StackPanel panel = new StackPanel();
> panel.addStyleName("mymenu");
>
> The problem is this only works if I include the CSS in the module XML file.
>
> If I include the CSS in the HTML host page, the style is overridden by
> standard.css.

[...]

> Do you know why including the CSS in the module XML or HTML host page
> affects the output?

The stylesheets in the <module>.gwt.xml are injected at the end of the
document's <head> once the document's <body> is fully loaded, so they
always come *after* the stylesheets found in the HTML, and therefore
override their declarations.

hezjing

unread,

Jul 4, 2009, 3:15:05 AM7/4/09

to Google-We...@googlegroups.com

Does this means I must include the CSS in the module XML if I'm going to override some of the styles in standard.css?

It seems that if I include the CSS in the module XML, I have to restart the hosted server console to every time the CSS is modified.

Whereas in HTML hosted page, I can simply refresh the CSS by clicking the refresh button in the hosted browser.

--

Hez

Thomas Broyer

unread,

Jul 4, 2009, 9:21:23 PM7/4/09

to Google Web Toolkit

On 4 juil, 09:15, hezjing <hezj...@gmail.com> wrote:
> Does this means I must include the CSS in the module XML if I'm going to
> override some of the styles in standard.css?

No, you can inherit
com.google.gwt.user.theme.standard.StandardResources instead of
com.google.gwt.user.theme.standard.Standard and include the stylesheet
in your HTML page.

...though actually I would recommend that you copy and modify the
standard.css (when the change has to be global) or use a "style
dependent name" (when it has to be somehow local to a few widgets, and
some other widgets use the "standard" CSS rules)

Reply all

Reply to author

Forward