I have identified the problem with above code. If i modify "background-image: none !important" to "background-image: white !important" in "google-visualization-table-tr-head-nonstrict" class, the code works just fine. But the issue still persists in IE9 (header bar scrolling). Also, I am not able to achieve the print functionality with scrollbars on.
On Friday, June 28, 2013 12:09:16 PM UTC+5:30, Heena wrote: > Here's the complete code. You can simply save the code and run as .html > file. > It has different behavior on different browsers. Works fine on IE7 and > IE8. Header scrolls in IE9. One of the 2 overlapped header scroll in > Firefox/chrome. > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> > <HTML> > <HEAD> > <TITLE> New Document </TITLE> > <META NAME="Generator" CONTENT="EditPlus"> > <META NAME="Author" CONTENT=""> > <META NAME="Keywords" CONTENT=""> > <META NAME="Description" CONTENT=""> > <script type="text/javascript" src=" > http://code.jquery.com/jquery-1.7.2.min.js";></script> > <script type="text/javascript" src="https://www.google.com/jsapi";></script > > > <style type="text/css" > > > .google-visualization-table-tr-head-nonstrict { > font-weight: bold !important; > text-align: left !important; > font-size: 12px !important; > width: 600px !important; > background-image: none !important; > } > > .tableRowGoogle { > border: 1px solid #EEE; > padding-right: 3px; > padding-left: 3px; > padding-top: 2px; > padding-bottom: 2px; > border-width: 1px 0px; > } > > .headercellgoogle { > padding: 6px; > width: 150px; > } > > .rowcellgoogle { > border: 1px solid #EEE; > padding-right: 3px; > padding-left: 3px; > padding-top: 2px; > padding-bottom: 2px; > border-width: 1px 0px; > width: 100%; > } > > .rowNumberCell { > border: 1px solid #EEE; > padding-right: 3px; > padding-left: 3px; > padding-top: 2px; > padding-bottom: 2px; > border-width: 1px 0px; > text-align: right; > width: 15px; > } > </style> > <SCRIPT> > google.load('visualization', '1', > {'packages':['corechart','geochart','table']}); > > function drawTableChart() { > alert("in draw table chart"); > var js={"cols": [{"id": "1","label":"Pages","type":"string"},{"id": > "2","label":"Time Period","type":"string"},{"id": > "3","label":"Title","type":"string"},{"id": > "4","label":"Visits","type":"number"},{"id": "5","label":"Page > Views","type":"number"},{"id": "6","label":"% of > Visits","type":"number"}],"rows": [{"c":[{"v":" > http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/10/2013"},{"v":""},{"v":8},{"v":26},{"v":80}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/11/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/12/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/13/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/14/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/15/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/16/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/17/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/18/2013"},{"v":""},{"v":2},{"v":4},{"v":20}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/19/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/20/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/21/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/22/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/23/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/24/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/25/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/26/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/27/2013"},{"v":""},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"http://q.mcd.com/http://q.mcd.com/jc222222"},{"v":"6/28/2013"},{"v":""},{"v":0},{"v":0},{"v":0 > }]}]}; > var cols= [0,4]; > var tab= 'tab51'; > > var data = new google.visualization.DataTable(js); > alert("data"+data); > var view = new google.visualization.DataView(data); > view.setColumns(cols); > var chartArea = {left : 20, right : 100}; > var cssClassNames = {tableRow :"tableRowGoogle",headerCell > :"headercellgoogle",rowNumberCell : "rowNumberCell",tableCell : > "rowcellgoogle"}; > var options=null; > if(data.getNumberOfRows()>7){ > > options = { > width : 600, > height:235, > sort : 'enable', > sortColumn : 1, > sortAscending : false, > scrollLeftStartPosition : 50, > showRowNumber : true, > 'chartArea' : chartArea, > 'cssClassNames' : cssClassNames > }; > }else{ > options = { > width : 600, > sort : 'enable', > sortColumn : 1, > sortAscending : false, > scrollLeftStartPosition : 50, > showRowNumber : true, > 'chartArea' : chartArea, > 'cssClassNames' : cssClassNames > }; > } > > var chart = new google.visualization.Table(document.getElementById(tab)); > google.visualization.events.addListener(chart, "error", function > errorHandler(e) { > google.visualization.errors.removeError(e.id); > }); > chart.draw(view, options); > } > </SCRIPT> > </HEAD> > <BODY > > TABLE<br> > <div id="tab51" ></div> > <input type="button" onclick="drawTableChart()" name="Click me" > value="Click me"> > </BODY> > </HTML> > Thanks. > > On Thursday, June 27, 2013 8:13:08 PM UTC+5:30, asgallant wrote: > >> Can you post an example page that replicates the problem? The CSS you >> posted has no effect on the default tables. >> >> On Thursday, June 27, 2013 6:51:00 AM UTC-4, Heena wrote: >>> >>> >>> I have applies a particular height in options tag and played with the >>> implied haeder class to display the table header (code below). Of the two >>> overlapped headers, one header remains fixed and and the other one is >>> moving when scrolled. So i can see two headers at a time when scrolled. >>> >>> .google-visualization-table-tr-head-nonstrict { font-weight: bold >>> !important;text-align: left !important;font-size: 12px !important;width: >>> 600px !important;background-image: none !important;} >>> >>> options = { width : 600, height:235, scrollLeftStartPosition : 50, >>> showRowNumber : true, 'chartArea' : chartArea, 'cssClassNames' : >>> cssClassNames }; >>> >>> Any help is appreciated. >>> >>> On Wednesday, July 18, 2012 9:23:24 PM UTC+5:30, asgallant wrote: >>> >>>> The Table's automatically apply a fixed header if you assign the height >>>> option when drawing the table. >>>> >>>> On Wednesday, July 18, 2012 5:10:43 AM UTC-4, vishnu prasad wrote: >>>>> >>>>> How can i keep the table header row fixed suppose i have 5000 records >>>>> i need to scrool every time uptime to see the column heading and for some >>>>> reason i dont want to use pagination is there way to keep the header row >>>>> fixed and scroll only the data rows. >>>> >>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
