Menu
Every time I use Google Charts' Table the google loader loads a http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css
which always and almost kills my bootstrap css, and i't pretty annoying at 2AM. :)
Note: I can't modify the table.css file.
Do you know any method that can prevent the loading of the CSS file?
Thanks for the help.
PS: Yep, I've tried with JS, but the table recompiles on switching page, so i should replace the table's classname every time on paged.
818
As seen in the Google Chart Table API Docs, you can override the CSS classes used by setting the cssClassNames option :
Use this property to assign custom CSS to specific elements of your table
Check the doc via the above link to see a full description of each property supported by cssClassNames.
Very simply, based on the Google Playground Table example, if you override all the properties, the table will be (almost) free of Google CSS.
You can try it by copying the following code in the playground example :
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
cssClassNames: {
headerRow: 'someclass',
tableRow: 'someclass',
oddTableRow: 'someclass',
selectedTableRow: 'someclass',
hoverTableRow: 'someclass',
headerCell: 'someclass',
tableCell: 'someclass',
rowNumberCell: 'someclass'
}
});
This should let the Twitter Bootstrap CSS alone.
The CSS loaded still changes a few things, but seems to go away if you simply remove the class google-visualization-table-table. You should do that after each .draw() call.
var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
page: 'enable',
pageSize: 2,
cssClassNames: {
/* ... */
}
});
google.visualization.events.addListener(visualization , 'page',
function(event) {
var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);
});
Don't forget to call the .removeClass() on initialization too (you should make a function, like there : http://pastebin.com/zgJ7uftZ )
162
Give your body a class. Then scope your CSS leveraging that class.
<body class="my">..</body>
.my .google-visualization-table-table { /* blah */ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
