Databases
StackOverflow2013
Postsdbo
PODiv Height not working with Dynamic Content IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv Height not working with Dynamic Content IE
    text
    copied!<p>I have a script that loads google charts api information into a div. The div has a fixed height and a scroll property. However, when the table from google loads, it overflows the div (see image below). This is on IE 8 in compatibility mode, and the css is as follows:</p> <pre><code>div.dashwrapper .no_overflow{overflow-x: hidden; overflow-y: scroll; height: 300px;} </code></pre> <p>Here is what it looks like in IE8 (Blue outline is from developer tools, it outlines the height of the div though) <img src="https://i.stack.imgur.com/APT21.jpg" alt="Dynamic content ignoring height constraint"></p> <p>And this is what it looks like in Firefox (how it should look) <img src="https://i.stack.imgur.com/djMsl.jpg" alt="Firefox output"></p> <p>Here is the HTML/Javascript for it:</p> <pre><code>&lt;script&gt; var table = new google.visualization.Table(document.getElementById('chain_info_this_year')); table.draw(data , {showRowNumber: true}); data = new google.visualization.DataTable(); data.addColumn('string', 'Store Name'); data.addColumn('string', 'Chain'); data.addColumn('number', 'Intakes &lt;?php echo date("F");?&gt;'); data.addColumn('number', 'Ships &lt;?php echo date("F");?&gt;'); data.addColumn('number', 'Intakes &lt;?php echo date("Y");?&gt;'); data.addColumn('number', 'Ships &lt;?php echo date("Y");?&gt;'); data.addRows([ &lt;?php for ($i = 0; $i &lt; count($store_info); $i++) { if ($i &lt;count($store_info) - 1) echo "['" . str_replace("'", '',$store_info[$i]['chain']) . "', '" . str_replace("'", '', $store_info[$i]['store']). "', " . $store_info[$i]['intakes_this_month'] . "," . $store_info[$i]['ships_this_month'] . "," . $store_info[$i]['intakes_this_year'] . "," . $store_info[$i]['ships_this_year'] . "],"; else echo "['" . str_replace("'", '',$store_info[$i]['chain']) . "', '" . str_replace("'", '', $store_info[$i]['store']). "', " . $store_info[$i]['intakes_this_month'] . "," . $store_info[$i]['ships_this_month'] . "," . $store_info[$i]['intakes_this_year'] . "," . $store_info[$i]['ships_this_year'] . "]"; } ?&gt; ]); var table = new google.visualization.Table(document.getElementById('store_info')); table.draw(data , {showRowNumber: true}); &lt;/script&gt; &lt;div class='dash_row no_overflow'&gt; &lt;div class='dash_mod full_width'&gt; &lt;div class='title'&gt;Store Information &lt;span class='small_text space_left'&gt;&lt;a style='cursor: pointer' onclick = "expand();"&gt;Show All&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class='mod_content'&gt;&lt;span id='store_info'&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>There is more html, but this is relevant stuff. The dash_row div is inside dashwrapper though, just to clarify.</p> <p>UPDATE: JSFiddle link: <a href="http://jsfiddle.net/qKzLf/" rel="nofollow noreferrer">http://jsfiddle.net/qKzLf/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload