current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've searched through this site and it seems that the best way to resize components dynamically is though CSS "position" and "width/height" parameters.

I have an app which partially looks like so: my graphs

It is currently being resized through javascript ($(window).width(), $(window).height()), and I would like to do it properly though CSS.

Here is my table layout:

<table class="table">
    <tr >
        <td >
            <div id="chartdiv1" ></div>
        </td>
        <td rowspan="3">
            <div id="Simulation" ></div>
            <div id="SimLabels" style="border: dashed; z-index: 1; width: 190px; position: relative; ">
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="BedMassLabel"><strong style="color: #4bb2c5;">Bed Mass (kg)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="H2OBedLabel"><strong style="color: #EAA228;">H2O in Fluid Bed (kg)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="BedTempLabel"><strong style="color: #c5b47f;">Temperature of Bed (C)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="evapRateLabel"><strong style="color: #579575;">Evaporation Rate (?)</strong>
            </div>
        </td>
    </tr>
    <tr >
        <td>
            <div id="chartdiv2" ></div>
        </td>
    </tr>
    <tr >
        <td >
            <div id="chartdiv3" ></div>
        </td>
    </tr>    
</table>

I have tried many combinations of positions, widths and heights, but very often it seems that no matter what percentage I put down for the width/height, the layout has a mind of its own. It should be mentioned that I am using both MVC and Twitter Bootstrap, so perhaps my html is affected by this. Could someone help me fix my html so that it replicates the design above with dynamic sizing? Thanks a lot, it is much appreciated!

share|improve this question
add comment

1 Answer

up vote 1 down vote

It is better to use <div> elements rather than a table for layout purposes. Check this SO Post for the reasons behind this.

Since you are using Twitter Bootstrap, your best option is using the Bootstrap's excellent (and core feature) grid system.

Here is a quick setup using Bootstrap 2.3:

<div class="row">
    <div class="span3">
        <div class="row">
            <div class="span12">
                <div id="chartdiv1" ></div>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <div id="chartdiv2" ></div>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <div id="chartdiv3" ></div>
            </div>
        </div>
    </div>
    <div class="span9">
       <div id="Simulation" ></div>
    </div>
</div>

or using Bootstrap 3 RC1:

<div class="row">
    <div class="col-lg-3">
        <div class="row">
            <div class="col-lg-12">
                <div id="chartdiv1" ></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="chartdiv2" ></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="chartdiv3" ></div>
            </div>
        </div>
    </div>
    <div class="col-lg-9">
       <div id="Simulation" ></div>
    </div>

</div>
share|improve this answer
 
Ok, I have tried that too, my issue with the grid system was making my second column span 3 rows... That, and my labels div needs to be in the same cell as my simulation div, is there a way to do that in the grid? On top of all that, I was still having similar issues with resizing, when I would put down "33%" for the height of my control graphs, they would all be way over the size of the page. –  relatively_slow Aug 8 '13 at 16:48
 
Check my edit, this should set you on the right track. Just remember that every <div class="row"> contains 12 columns even if it is smaller in width, which is why for the 3 sub-rows I create a 12 columns large div that spans across the whole row contained in the 3-column left side of the layout. –  edsioufi Aug 8 '13 at 16:55
1  
EDIT: Added <div id="chartdiv3" > and <div id="Simulation" > to clarify more the layout. –  edsioufi Aug 8 '13 at 17:00
 
Ah, thanks a lot! That does look a little confusing though, could you tell me where in this div layout I would insert my current divs? –  relatively_slow Aug 8 '13 at 17:02
1  
Nevermind, you edited ahead of me again haha Ill try it out, thanks! –  relatively_slow Aug 8 '13 at 17:02
show 9 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.