How to prevent loading google charts table css-第2页回答

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.

标签： javascript css twitter-bootstrap google-visualization

7条回答

Melony?

2楼-- · 2019-03-13 04:48

My idea is still like some others here, to override the google through a more specific selector. I think with bootstrap, perhaps the easiest way to do that is something like this:

Set up an `id` on your html tag.

HTML

<html id="myHTML">All your html goes here</html>

Set up bootstrap to load all its selectors under that `id`.

LESS

#myHTML {
   font-size: 100%;
   @import: "yourpath/bootstrap.less";
   @import: "yourpath/anyOtherBootstrapFilesYouMightLoad.less";
   etc...
}

Note, the font-size: 100% is because the bootstrap.less has html { font-size: 100% } which you want to keep that functionality, but you will lose it if you don't replicate what is in the bootstrap call for html. See the CSS output below for further explanation.

Output

CSS (Brief sample output)

#myHTML {
    font-size: 100%;
}

#myHTML article, 
#myHTML aside, 
#myHTML details, 
#myHTML figcaption, 
#myHTML figure, 
#myHTML footer, 
#myHTML header, 
#myHTML hgroup, 
#myHTML nav, 
#myHTML section {
    display: block;
}

#myHTML html { 
/* this is from the base html call in bootstrap, but will never 
   select anything as it is basically like writing "html html" 
   for a selector, which is why we added the font-size to your 
   LESS code above 
*/
    font-size: 100%;
}

#myHTML .btn {
    etc...
}

By doing this, you can see how all straight classes, like .btn, end up having an id appended to them that is on your <html> tag. This gives the selector a higher specificity than google's .google-visualization-table-table *, as the id is higher than the * selector in precedence.

0人赞添加讨论(0) 举报

上一页 1 2