scrolling table inside div

67 views
Skip to first unread message

larry

unread,
Apr 14, 2009, 12:53:25 PM4/14/09
to Google Visualization API
I have a google table right-aligned inside a div that has the
style=overflow:auto set.
I do not specify a div width, but I do specify a div height.

I have a table whose columns do not span the full div width and the
table has more rows than will fit into the div width.

When I draw the table the div gets a vertical scroll bar which isn't
what I want because when I scroll up, the column names are scrolled up
and are not visible. When I click on a column name the vertical scroll
bar suddenly becomes associated with the table which is what I want
because then the column names row is frozen and always visible when
you scroll.

How can I make the vertical scroll bar be part of the table and not
the div when it initially is drawn?

p00kie

unread,
Apr 14, 2009, 1:48:46 PM4/14/09
to Google Visualization API
This is what you want:

<div id="table_div" style="width:100%; height: 500px; overflow:auto"></
div>

overflow:auto

larry

unread,
Apr 14, 2009, 4:59:35 PM4/14/09
to Google Visualization API
Thanks. That helped a bit,but I still have the problem that the table
is not spanning the full width of the div. But if I click on a column
name then the column widths of the table adjust to span the full
width of the div. How can I get the table to auotmatically span the
full width of the div when it is first drawn.

Markw65

unread,
Apr 14, 2009, 5:24:20 PM4/14/09
to Google Visualization API
Are you dynamically loading the table package and creating the table
from the onload callback?

If so there is a bug, where the callback fires before the css has
finished loading, and so when the table computes its size, it gets the
size wrong. I submitted a bug against the google loader a while back,
but nothing happened so far.

Mark

Markw65

unread,
Apr 14, 2009, 5:29:57 PM4/14/09
to Google Visualization API
Forgot to add...

You can see a very simple example of the bug here:
http://maps.myosotissp.com/bugs/jsapi-css-bug.html

When you click "Create table", it creates a table, computes its size,
and creates a div with a red border of the specified size. The first
time you click it, you will see that the red border is much smaller
than the actual table (because the css wasnt loaded when the size was
computed). For subsequent clicks on the button, the red border will
surround the table perfectly.

Mark

Markw65

unread,
Apr 14, 2009, 5:37:45 PM4/14/09
to Google Visualization API
And finally :-)

If you add #hack to the url, there's a hack in there that waits for
the .css to be loaded. Then the example works as intended...

Mark

larry

unread,
Apr 14, 2009, 9:16:21 PM4/14/09
to Google Visualization API
Thanks! You're better than Google seach. What if Google created a
forum for every major and minor level of knowledge (down to some
level). There would probably be no need for a semantic web. If you're
willing to wait hours instead of milliseconds you get much better
answers than a Google search.
Google could have two buttons on their search page. The regular search
and the "search human brains". If you chose search "human brains" your
query would be categorized and sent to the appropriate forum for
answering. Is there such a thing? There should be!
Reply all
Reply to author
Forward
0 new messages