Dynamically resize divs in a table using CSS

Question

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?

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

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>

edited May 23 '17 at 10:29

Community

1
1

answered Aug 08 '13 at 16:41

edsioufi

8,297
3
36
42

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. – tbogatchev Aug 08 '13 at 16:48
Check my edit, this should set you on the right track. Just remember that every
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 08 '13 at 16:55
1

EDIT: Added
and
to clarify more the layout.
– edsioufi Aug 08 '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? – tbogatchev Aug 08 '13 at 17:02
1

Nevermind, you edited ahead of me again haha Ill try it out, thanks! – tbogatchev Aug 08 '13 at 17:02
Hmmm, would I have to resize the divs with CSS too? Here is what they look like now... http://i.imgur.com/AAIWqbR.png – tbogatchev Aug 08 '13 at 17:07
No Bootstrap takes care of that, you should keep your divs without any "width" property and they will expand to the width of the Bootstrap columns. Except for the
, which you would have to position manually. For the picture, it is a weird result, make sure you didn't make a typo applying the layout I provided.
– edsioufi Aug 08 '13 at 17:13
Hey again, I pasted the code you gave me and I am still getting the same layout as in the picture. When I assign some height and width parameters to the divs, they align properly, but that defeats the point. Looking into the MVC bootstrap shared_view, this table, along with everything else, are in a "container" div which calls RenderBody() to get the rest of the html. Could that be a problem? – tbogatchev Aug 08 '13 at 18:03
I am not familiar with MVC. As a general advice however you should debug this by analyzing the actual HTML output in the browser on the client-side, once your page is fully rendered. In chrome for example you could right-click and "inspect element" to get to the source code. This, the rendered page, should have the correct layout. If you find errors, you can fine tune the server side to produce the desired output. Also, you should check that you are using the correct version of Bootstrap and that the css classes are imported and applied to the elements. – edsioufi Aug 08 '13 at 18:30
The html is the same in the inspector as it is in the code. I believe the problem is still the rowspan of the bigger graph. Could you explain how this layout makes the bigger graph span 3 rows? – tbogatchev Aug 08 '13 at 18:40
Well in Bootstrap you should think by column not by row. Since the 3 rows are within the left column they are limited in width and stack each time you add a row. Think of it like a newspaper, or think of tje 3 small graphs as a sidebar. The height is created when you add content to the rows: they expand automatically. Anyways the link to the Bootstrap doc I have provided will definitely explain it better than I would. – edsioufi Aug 08 '13 at 18:52
Thinking about it, it could be, depending on your charts, that the chart divs need to have a height specified. This does not defeat the point, because your layout does not use tables anymore (the bad consequences are explained in the referenced SO post in my answer). You end up with a cleaner implementation. – edsioufi Aug 08 '13 at 19:08
Most importantly, you get dynamic resizing with css out of the box with Bootstrap. Your columns width are taken care of by Bootstrap. Then your charts take fill the width of the column. What you can do is use the css attribute padding-top with a percentage to give yout charts a fixed aspect ratio. Search fix aspect ratio with css for more info. In the end, the columns dictate rhe charts width and are responsive in the best (Bootstrap) way, and the aspect ratio dictates the height of your charts. – edsioufi Aug 08 '13 at 19:18
Hmm, when I specify the height only, the 3 small graphs still overlap my large one. This is fixed when I take the span12 divs out. More importanly though, and the whole reason I'm in this mess, the graphs still dont resize with the window. A refresh is required to get everything aligned properly. Is there no way to make their sizes truly dynamic? – tbogatchev Aug 08 '13 at 19:42

Dynamically resize divs in a table using CSS

1 Answers1