title: XUL prefwindow size problems
body: <p>I have a Firefox add-on with a <code>&lt;prefwindow&gt;</code> to control the preferences for my add-on. It contains 2 separate <code>&lt;description&gt;</code> tags to provide more info at certain places (see below). I have some JavaScript that I run when the dialog loads to set a CSS <code>max-height</code> and <code>max-width</code> based on the dimensions of the user's screen (I found this necessary because otherwise the dialog would expand horizontally past the edges of the screen just so the one <code>&lt;description&gt;</code> (which has CSS <code>word-wrap: break-word</code> set - <a href="https://stackoverflow.com/questions/420076/forcing-a-description-widget-to-wrap-in-xul">Forcing a description widget to wrap</a>) fits on one line).</p>
  
  <p>However, when Firefox (v3.6 and v4.0) displays the prefwindow, it only accounts for the descriptions as if they are one line after setting the <code>max-width</code> and <code>max-height</code>, so there is a scrollbar even though there is room for the dialog to expand vertically (I have <code>overflow: auto</code> set on the topmost vbox just so stuff wouldn't get cut off without a scrollbar).</p>
  
  <p>Basically, what I want is for the contents of the <code>&lt;description&gt;</code> tags to wrap so the dialog isn't longer than the user's screen and then for the dialog to resize horizontally also so there isn't a scrollbar.</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
  &lt;prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;" sizemode="maximized"&gt;
      &lt;prefpane&gt;
          &lt;script type="application/x-javascript"&gt;&lt;![CDATA[
          window.addEventListener("DOMContentLoaded", function (event) {
              // Initialize size
              document.documentElement.style.maxWidth = ((screen.availWidth || screen.width) - 100) + "px";
              document.documentElement.style.maxHeight = ((screen.availHeight || screen.height) - 100) + "px";
          }, false);
  
          function showExample(n) {
              // Not important...
          }
          ]]&gt;&lt;/script&gt;
          &lt;preferences&gt;&lt;!-- ... --&gt;&lt;/preferences&gt;
          &lt;!-- Just trying everything with this vbox here... --&gt;
          &lt;vbox flex="1" style="overflow: auto; width: 100%; height: 100%;"&gt;
              &lt;groupbox&gt;
                  &lt;caption label="Inline Reference Links" /&gt;
                  &lt;description style="word-wrap: break-word;"&gt;Inline reference links are the tiny "superscript" numbers that appear inside [special name here] and link to a reference at the bottom. &lt;button oncommand="showExample(1)" label="Show Example" style="vertical-align: middle;" /&gt;&lt;/description&gt;
                  &lt;radiogroup preference="pref_mode"&gt;
                      &lt;radio value="0" label="Show all inline reference links by default" /&gt;
                      &lt;radio value="1" label="Hide all inline reference links by default" /&gt;
                      &lt;radio value="2" label="Only show inline reference links when hovering over containing paragraph" /&gt;
                  &lt;/radiogroup&gt;
                  &lt;hbox&gt;
                      &lt;checkbox preference="pref_hideOtherTags" label="Hide other bracketed tags" /&gt;
                      &lt;button oncommand="showExample(2)" label="Show Example" style="vertical-align: middle;" /&gt;
                  &lt;/hbox&gt;
                  &lt;checkbox preference="pref_useVisibility" label="Make inline reference links invisible instead of removing them*" /&gt;
                  &lt;description style="word-wrap: break-word; height: auto;"&gt;*When the inline reference links are invisible, they cannot be seen, but they still take up space on the page. When we are set to show inline reference links when hovering over the containing paragraph, this option can be useful to prevent shifting when the reference links are shown.&lt;/description&gt;
              &lt;/groupbox&gt;
          &lt;/vbox&gt;
      &lt;/prefpane&gt;
  &lt;/prefwindow&gt;
  </code></pre>
  
  <p>Here is a screenshot of the prefwindow: <a href="https://i.stack.imgur.com/L3JOm.png" rel="nofollow noreferrer">http://i.stack.imgur.com/L3JOm.png</a></p>