How to apply CSS to a DialogBox using ClientBundle?


Tags: css,gwt

Problem :

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?



Solution :

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.


    CSS Howto..

    Css - how hide third element td?

    How to include SASS files and CSS files into version repository and developement cycle

    How to handle an image inside bootstrap column?

    list-style-type no showing

    Showing Text When Hovering Over an Image Link

    How do I change the background on mouse over immediately?

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    Using Javascript or JQuery to show/hide on click, and change image as well

    How to change elements display order in CSS?

    How to detect if my search bar has been expanded?

    How to achieve this CSS layout - Answered [closed]

    How to apply CSS to navigation bar with master pages?

    How to add javascript to an image from the content_wrapper in the css stylesheet

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How to use the Xpath and CSS selector in for function

    Twitter Bootstrap + Rails, how do you integrate and modify it?

    How to vary shade of specific table row id

    How to override CSS

    How to test a CSS parser?

    How to import a css file only for Firefox but not for other browsers?

    How to add ::after in the HTML link tag

    How to get element by its partial class name CSS

    how to gap a list in half

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to increase size of something in class, but not other elements in class?

    HSS Liquid Layout Issue: how to fill the entire browser

    How do I push inline elements onto the next line

    bootstrap collapse to show a div it work but how to make it didn't affect side items?

    how to replace a link name text

    How to copy this semi-static menu?