google.load callback gets called before css has finished loading

[GoogleCodeExporter]

What steps will reproduce the problem?
1. google.load("visualization", "1", {"packages":"table", 
"callback":setup});
2. inside setup, create a table, and determine its size. Create a div of 
that size, and place the table inside the div
3. show everything.

What is the expected output? I expect the table to fit the div.
What do you see instead? Its a different size (in my case, usually smaller 
- but that would depend on the inherited settings at the point where the 
table is inserted).

If I repeat the above, it works as expected (because the css is already 
loaded the second time).

What version of the product are you using? On what operating system?
Windows XP

Please provide any additional information below.

I have a "hack" workaround, which is to create a div with class "google-
visualization-table-arrow-empty" (the last entry in the table.css file), 
and wait until its padding-left value is non-zero. This is, of course, 
rather fragile.

If you ensured that all packages that have css have a special class, say 
"<package_name>_css_loaded", with some easily detectable style (eg 
display:none), you could have the loader wait until it was loaded before 
firing the callback.

Original issue reported on code.google.com by mark...@gmail.com on 8 Jan 2009 at 3:36

[GoogleCodeExporter]

Hey Mark --

Could you make an isolated reproduction of this issue (just the problem by 
itself) and post a link to it?

Thanks!

-Ben

Original comment by lisba...@gmail.com on 8 Jan 2009 at 3:59

[GoogleCodeExporter]

Ive put a test case at:

http://maps.myosotissp.com/bugs/jsapi-css-bug.html

Hit the create button to create the table. The red border should fit nicely 
around 
the table - but it doesnt the first time. Click the create button again, and 
you will 
get a nice fit (the css is already loaded).

If you put #hack at the end of that url, it will attempt to wait for the css to 
load 
by watching a div with class "google-
visualization-table-arrow-empty", and waiting for its padding-left to become 
non-
zero. With that version, the red border will fit the table every time (until 
you 
change the contents of table.css!).

I realize that I could simply *not* size the div, and allow the browser to 
resize it 
dynamically :-)

In my real case, the table is just a part of the layout, and Im trying to 
position 
other elements around it.

Original comment by mark...@gmail.com on 8 Jan 2009 at 5:43

[GoogleCodeExporter]

Hey Mark --

I don't think this is a bug with the loader, it seems to be a bug with the 
Visualization API, possibly.  I tried 
loading the table right from the start and you'll see that it works:
http://lisbakken.com/ajaxapi/test.html
If you take that code in that link and take out the create_table() in the load 
function, then click the button to 
load the table, you'll see that the CSS is incorrect.  I'm not sure exactly why 
this is happening, but it doesn't 
seem to be because of the loader.  If you could let the visualization team know 
in their group, I think they can 
help you further:
http://groups.google.com/group/google-visualization-api

For now I'm going to mark this ticket as invalid because I don't think it 
pertains to the loader but rather 
something with the visualization API.

Thanks!

-Ben

Original comment by lisba...@google.com on 8 Jan 2009 at 6:19

• Changed state: Invalid

[GoogleCodeExporter]

Its no surprise that your modified version works, because in that case the 
*browser* 
waits for all the scripts and css to be loaded before it fires the onload event!

The problem is that the google.load isnt doing that. Its firing the callback 
after 
the javascript has loaded, but its not waiting for the css.

I can see that it would be possible to push this off onto the visualization 
library - 
but what about all the other packages which use css? Wouldnt it make more sense 
to 
have this handled in a central location?

Of course, Im assuming that the loading *is* being handled centrally. Perhaps 
google.load simply loads a thin per-package loader, which then handles the rest 
of 
the loading, and fires the callback itself.

But if its google.load that takes care of firing the callback, Id say that the 
problem is with google.load, not the visualization library.

Original comment by mark...@gmail.com on 8 Jan 2009 at 6:47

[GoogleCodeExporter]

Mark --

When I tried my test page without create_table() in the load function, and 
instead was clicking it, it was still reproducing the bug.  I 
was loading the library from the start, so there was plenty of time for 
everything to load.  When I created the table with the button, the 
CSS was wrong.  That's why I thought the bug wasn't with the loader.  However, 
I just went to make that test for you to show you, and 
now it's working (I'm going to blame my cache on this one :).

Anyways, I'll look more into the problem and get back to you on this ticket.

Thanks,
Ben

Original comment by lisba...@gmail.com on 8 Jan 2009 at 7:00

[GoogleCodeExporter]

Original comment by lisba...@google.com on 8 Jan 2009 at 7:01

• Changed state: Accepted