Over a million developers have joined DZone.

Fixing styling incompatibility with Google Charts and Twitter Bootstrap

DZone's Guide to

Fixing styling incompatibility with Google Charts and Twitter Bootstrap

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

Ran into a vexing issue this week when we upgraded to using Twitter Bootstrap. Some of our analytics graphs using Google Charts were suddenly broken in IE 7/8/9. Instead of the expected 100px wide bar graphs, they were just a few pixels wide.

google charts bad

Normally Google Charts produces the following DOM for their bar graphs.

<span style="padding: 0; float: left; white-space: nowrap;">
    <img style="padding: 0px;" src="/images/bar_s.png" height="12" width="1">
    <img style="padding: 0px;" src="/images/bar_b.png" height="12" width="16">
    <img style="padding: 0px;" src="/images/bar_w.png" height="12" width="34">
    <img style="padding: 0px;" src="/images/bar_s.png" height="12" width="1">

It turns out that the issue is with Bootstrap’s CSS for responsive images, and in particular the img { width: auto; } declaration. It causes older versions if IE to ignore height and width attributes that are set directly on the DOM element. This issue has come up before in other contexts. Removing the offending CSS solves the issue, but I wanted to stick with vanilla Bootstrap so we could cleanly upgrade to new vesions. Likewise, you probably don’t want to edit the Google Charts javascript.

Instead, you can layer in some additional javascript, fired on the Google Charts onReady event, to add inline width declarations into the style attribute for the images. While IE 7/8/9 ignore width attributes when combined with img { width: auto; }, it does respect style attributes.

function fixGoogleChartsBarsBootstrap() {
    /* Google charts uses <img width="12px">, which is incompatible with Twitter
     * bootstrap in responsive mode, which inserts a css rule for: img { width: auto; }.
     * On IE7/8/9, that causes the browser to ignore the width attribute, and
     * the bars are collapsed to 1px each.
     * The fix is to use inline style width attributes, ie <img style="width: 12px;">.
     * BUT we can't change the way Google Charts renders its bars. Nor can we change
     * the Twitter bootstrap CSS and remain future proof.
     * Instead, this function can be called after a Google charts render to "fix" the
     * issue by setting the style attributes dynamically.
    $("img[width]").each(function(index, img) {
        img.css("width", img.attr("width"));

google charts bad

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Chase Seibert, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}