How to change position of loading indicator

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
is there some way to change position of loading indicator? It uses style attribute and that’s why I can’t overwrite it in style class.

Here’s current html-code:

[code]

[/code]Cheers Markus
2

Hi,

you can overwrite the styles defined in the style attribute by using the
“!important” declaration
.

For example:


.i-loading-indicator {
    top: 200px !important; 
}
3

Hi,

Hmm… someone else asked about this a while ago, but I canät seem to find the message - must be victim of the recent forum problem :frowning:

Anyway, I briefly tried to modify the loading indicator so that it could be easily moved anywhere, but the quick fix had a nasty side-effect: you could not click anything while the indicator was showing.

The current implementation is due to the fact that we want it to hover in the upper right corner of the application - i.e visible even if the viewport is scrolled, and over the right application if multiple apps are embedded in the same page, as is the case with portals.

Clearly we need to change this somehow to allow more flexible positioning.
Suggestion on how it should be implemented are welcome :slight_smile:

(currently this has a pretty low priority - let us know if you really need this quickly…)

Best Regards,
Marc

4

Hi,
“!important” declaration seems to work with IE7, Firefox and Opera but not with IE6 so its quite good workaround but not perfect. Request for change came from our client so it would be nice to have this change in some (not so long) period.

Markus

5

“!important” seems to work with IE6 also. Our graphic made it work with following css:

.i-loading-indicator, .i-loading-indicator-delay, .i-loading-indicator-wait { width: 56px; height: 47px; position: absolute; !important; left: 640px !important; top: 159px !important; z-index: 10000; background: transparent url(img/loading-indicator.gif); } Markus

6

I’m sorry to bring this old topic up but that side-effect is exactly what I’m trying to achieve. I want to disable everything (or at least most operations) while the loading indicator is showing. How did you do it?

7

Hi!

The loading indicator is now days positioned with css only. So you could try something like this:

  • make the indicator width and height 100%
  • top, left to be 0;
  • make the background translucent
  • position the background image where ever you like it

I think you’d get a curtain on top of the UI, blocking all the clicks.

cheers,
matti

8

Thank you for the tip Matti! That worked out great.