views:

295

answers:

1

I want to replace the standard dijit.ContentPane loadingMessage with a animated GIF instead of the default "Loading..." message.

According to documentation, the default message is:

<span class='dijitContentPaneLoading'>${loadingState}</span>

So I have overridden the CSS with:

.dijitContentPaneLoading {
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}

I can see the GIF and the "Loading..." message when the ContentPane loads, but the problem is that because it is only a <span> I can't seem to get it to take up the whole pane and be centered, instead it sits in the top left and doesn't display the whole loading graphic. I don't want to have to override each loadingMessage with code, especially I prefer to use the declarative mode.

Is there some simpler way (hopefully via CSS) to get the loading image centered within the pane?

+2  A: 

Would something like this work?

.dijitContentPaneLoading {
    display: block;
    position: relative;
    top: 40%;
    background-image: url('../images/loading.gif');
}

(Also make sure that the ContentPane itself has position: relative or position:absolute)

Of course, the pane needs to have a fixed height. If it's just a plain ContentPane that expands to fit it's content then the browser won't know the height until the load finishes, hence it would be impossible to center the loading message vertically.

Bill Keese
Thanks for the pointer... With a little manipulation I was able to get it to display exactly like I wanted.
Kitson