CODEWITHSUNDEEP
layouthtmltwitter-bootstrapgoogle-visualization
Terix
Terix

Reputation: 1387

google chart dashboard and bootstrap row structure

I am putting some Google charts inside a bootstrap theme. I am using Chart dashboard that uses a structure like this:

<div id="dashboard">
        <div id="control1"></div>
        <div id="chart1"></div>
</div>

and boot strap uses a structure like this, to place two items side by side:

<div class="row-fluid">
        <div class="span3"></div>
        <div class="span9"></div>
</div>

How can I mix those two together, so I end up with the control of chart inside the span3 and the chart in span9? My best result so far is this:

<div class="row-fluid">
<div id="dashboard" >
        <div id="control1" class="span3" style="width: 25%; height: 400px;"></div>
        <div id="chart1" class="span9" style="width: 73%; height: 400px;"></div>
</div>
</div>

but I would like to strip away the % width and have a simpler structure. I've tested this:

<div id="dashboard" class="row-fluid >
        <div id="control1" class="span3"></div>
        <div id="chart1" class="span9"></div>
</div>

but it get messed up and the bootstrap scaffolding is broken. How can I make them working together?

Upvotes: 2

Views: 2851

Answers (1)

Jeff-Meadows
Jeff-Meadows

Reputation: 2184

I was able to get it working OK with the following markup.

<div class="row-fluid">
    <div id="dashboard">
        <div class="span4" style="font-size: 0.9em;">
            <div id="control1"></div>
        </div>
        <div class="span8">
            <div id="chart1"></div>
        </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/Jeff_Meadows/V8psC/

Upvotes: 3

Related Questions