How to apply CSS to a DialogBox using ClientBundle?

Question

I'm trying to apply some CSS to my subclass of DialogBox via ClientBundle. When inspecting the DOM I can see an obfuscated class-name got added (class="gwt-DialogBox GF2AVPFBPD") but it does not bear/apply any propertes/changes...

class RegistrationDialog 
  extends DialogBox 
{
  interface MyClientBundle 
    extends ClientBundle 
  {
    @Source("regDlg.css")
    MyCssResource css();
  }

  interface MyCssResource 
    extends CssResource 
  {
    String registrationDialog();
  }

  MyClientBundle myClientBundle = GWT.create(MyClientBundle.class);

  RegistrationDialog()
  {
    add(uiBinder.createAndBindUi(this));
    addStyleName(myClientBundle.css().registrationDialog());
  }
  ...

regDlg.css:

.registrationDialog
{
  background-image: url("logo.png") !important;
  background-color: red !important;
  color: red !important;
  font-size: xx-large !important;
}

What am I missing please?

Which style has the higher priority - your or GWT's (`.gwt-DialogBox`)? Check it with Firebug or a similar tool to see if [GWT is not overriding your style](http://stackoverflow.com/questions/2322779/gwt-theme-style-overrides-my-css-style). — Igor Klimer, Aug 30 '10 at 22:41
I did that. Like I said, I inspected the DOM, the properties are not listed. (Meaning not even listed as being disabled by another rule.) :( Thanks anyways, Igor. — Jaroslav Záruba, Aug 30 '10 at 23:47
If they are not listed, they might be getting pruned by Firefox/Firebug/whatever - the usual reason is a syntax error. Set the `CssResource.style` property to `pretty` in your module file to disable obfuscation for easier debugging :) ``. See CssResource's [Lever and Knobs](http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Levers_and_Knobs). — Igor Klimer, Aug 31 '10 at 08:02
Wouldn't Eclipse report an error? Anyways, I've set the CssResource.style to pretty and not the class is GO412LVPD-cz-mma-client-ui-LoginDialog-MyCssResource-registrationDialog. But still no properties applied. :( — Jaroslav Záruba, Aug 31 '10 at 19:17
Well I'm giving up for now, I will create a new project to make sure nothing else is interfering with the ClientBundle. Thanks for your time & effort, Igor. — Jaroslav Záruba, Aug 31 '10 at 20:48

score 3 · Accepted Answer · edited May 23 '17 at 12:11

You're forgetting to call CssResource.ensureInjected(). From the documentation;

At runtime, call CssResource.ensureInjected() to inject the contents of the stylesheet.
- This method is safe to call multiple times, as subsequent invocations will be a no-op.
- The recommended pattern is to call ensureInjected() in the static initializer of your various widget types

Check out the answer on this question for more code info.

How to apply CSS to a DialogBox using ClientBundle?

1 Answers1