Saturday, April 6, 2013

ClientBundle css resource - background image not displayed

Hi,

I'm trying to move some css out of my globale gwt moduel file to a separate Resource class.
But the styles are only partially applied after refactoring (eg icons are not displayed, gradients are not displayed). What could I be doing wrong with the following:

This is the css that was in my application.css. I have a background with linear gradient, and an image in the same folder as the css file. Everything is already displayed correctly using setStyleName("bubble"); in my code.

.bubble {
    position: relative;
    width: 250px;
    height: 120px;
    padding: 0px;
    background: #000000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    background: url(myIcon.gif) no-repeat 15px, -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background: url(myIcon.gif) no-repeat 15px, -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
   
}

.bubble:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 110px;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #000000 transparent;
    display: block;
    width: 0;
    z-index: 1;
}


Now, I introduced a ClientBundle resource, extracted the css above and also the icon:

interface MyResource extends ClientBundle {
    public static final MyResource INSTANCE  = GWT.create(MyResource.class);

    @Source("MyResource.css")
    Style css();
   
    interface Style extends CssResource {
        @ClassName("bubble")
        String bubbleStyle();
    }
}


I'm using exactly the same statement to apply the styles:
NotificationResources.INSTANCE.css().ensureInjected();
setStyleName(NotificationResources.INSTANCE.css().bubbleStyle());

BUT: 1) I don't see the icon, 2) I don't see the gradient!
What am I missing here?

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

No comments:

Post a Comment