Databases
StackOverflow2013
Postsdbo
POExpand div children to width of the canvas, not just the viewport?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExpand div children to width of the canvas, not just the viewport?
    primarykey
    data
    text
    <p>Sorry if this is a dup; I haven't found any questions that pose quite this same problem.</p> <p>The issue is illustrated by this screenshot, ironically taken from <a href="http://nettuts.com/html-css-techniques/solving-5-common-css-headaches/" rel="nofollow noreferrer">a CSS blog site</a> (it's immediately below the text "In order to set a positioning context".) I've been hitting the same issue in my own code.</p> <p>About halfway down this image, there's a line with a long comment that forces the enclosing <code>div</code> to provide a horizontal scrollbar (via the <code>overflow: auto</code> setting.) As shown in the screenshot, the surrounding lines with gray backgrounds don't stretch to fill the entire width of the parent's canvas. Instead, they remain fixed at the width of the parent's <strong>viewport</strong>. (Those backgrounds belong to <code>div</code>s that enclose individual lines of text.)</p> <p>I see this in Firefox 3.1 and IE8 (regardless of IE7 compatibility mode.)</p> <p>Is there any cross-browser method to force those child <code>div</code>s to stretch to the full width of the canvas (or put another way, to set their widths to the max width of their peers)? My guess is "no", or the site's author would be using it.</p> <p><a href="http://outofwhatbox.com/images/nettuts-css.jpg" rel="nofollow noreferrer">alt text http://outofwhatbox.com/images/nettuts-css.jpg</a></p> <p><strong>EDIT</strong>: Here is a bare-bones example. For some reason, the scrollbar doesn't show in IE, but it does show in Firefox 3.1 (and with the same behavior that I'm seeing elsewhere.)</p> <pre><code>Note: The CSS shown here is derived from SyntaxHighlighter (http://alexgorbatchev.com/), released under GPL 3. &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;sample&lt;/title&gt; &lt;style type="text/css"&gt; .syntaxhighlighter .line.alt1 .content { background-color:#FFFFFF !important; } .syntaxhighlighter .line .content { color:#000000 !important; display:block !important; font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace; font-size: 12pt; font-weight: 400; color: #000000; white-space: nowrap; } .syntaxhighlighter .line.alt2 .content { background-color:#F0F0F0 !important; } .syntaxhighlighter { background-color:#E7E5DC !important; margin:1em 0 !important; padding:1px !important; width:497px !important; height: auto !important; } .line { overflow:visible !important; } .lines { overflow-x:auto !important; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="syntaxhighlighter" &gt; &lt;div class="lines"&gt; &lt;div class="line alt1"&gt; &lt;span class="content"&gt; &lt;span style="margin-left: 0px ! important;" class="block"&gt; &lt;code class="plain"&gt;this is line 1 &lt;/code&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class="line alt2"&gt; &lt;span class="content"&gt; &lt;span style="margin-left: 20px ! important;" class="block"&gt; &lt;code class="plain"&gt;this is line 2&lt;/code&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class="line alt1"&gt; &lt;span class="content"&gt; &lt;span style="margin-left: 40px ! important;" class="block"&gt; &lt;code class="plain"&gt;this is a very very very very very very long line number 3&lt;/code&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class="line alt2"&gt; &lt;span class="content"&gt; &lt;span style="margin-left: 0px ! important;" class="block"&gt; &lt;code class="keyword"&gt;this is line 4&lt;/code&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class="line alt1"&gt; &lt;span class="content"&gt; &lt;span style="margin-left: 20px ! important;" class="block"&gt; &lt;code class="plain"&gt;and this is line 5.&lt;/code&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>UPDATE</strong> 2009/05/14: Here's the script that I've deployed, based on <a href="https://stackoverflow.com/questions/815443/expand-div-children-to-width-of-the-canvas-not-just-the-viewport/815549#815549">brianpeiris's answer</a> below. In case anyone's interested, here's a <a href="http://www.outofwhatbox.com/blog/2009/05/fixing-a-scroll-where-the-grays-came-in/" rel="nofollow noreferrer">more detailed description</a> of the changes that were needed.</p> <pre><code>// Ensure that each content &lt;span&gt; is sized to fit the width of the scrolling region. // (When there is no horizontal scrollbar, use the width of the parent.) fixContentSpans : function() { jQuery('.syntaxhighlighter &gt; div.lines').each(function(){ var container = jQuery(this); var scrollWidth = this.scrollWidth; var width = jQuery(this).width(); var contents = container.find('.content'); jQuery(contents).each(function(){ var child = jQuery(this); var widthAvail = scrollWidth - parseFloat(child.css("margin-left")) - parseFloat(child.css("padding-left")) - parseFloat(child.css("padding-right")); var borderLeft = parseFloat(child.css("border-left-width")); // IE uses names (e.g. "medium") for border widths, resulting in NaN // when we parse the value. Rather than trying to get the numeric // value, we'll treat it as 0. This may add a few additional pixels // in the scrolling region, but probably not enough to worry about. if (!isNaN(borderLeft)) { widthAvail -= borderLeft; } child.width(widthAvail); }); }); }, </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USDan Breslau
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POExpand div children to width of the canvas, not just the viewport?
      1. USwheresrhys
      1. VTFavorite
    1. COIt would behoove you to reduce this to a code snippet that people could copy locally and play with to find a solution. It's just too hard otherwise.
      singulars
      1. POExpand div children to width of the canvas, not just the viewport?
      1. UScletus
    2. COI was hoping this was a known problem, and someone could answer "yes" or "no" quickly enough :-) I'll work on producing a code sample, but won't be able to do it right away.
      singulars
      1. POExpand div children to width of the canvas, not just the viewport?
      1. USDan Breslau
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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