XUL prefwindow大小問題

Question

我有一個Firefox附加組件<prefwindow>來控制我的附件的首選項。它包含2個獨立的<description>標籤，用於在特定位置提供更多信息（請參見下文）。我在對話框加載時運行一些JavaScript，根據用戶屏幕的尺寸設置CSS max-height和max-width（我發現這是必要的，否則對話框會水平擴展到屏幕邊緣，因此一個<description>（其中CSS word-wrap: break-word設置 - Forcing a description widget to wrap）適合於一行）。

但是，當Firefox（v3.6和v4.0）顯示prefwindow時，它只會在設置max-width和max-height後將它們看作是一行，因此即使有空間也有滾動條爲對話框垂直擴展（我有overflow: auto設置在最上面的盒子，所以沒有滾動條的東西不會被切斷）。

基本上，我想要的是<description>標籤的內容包裝，因此對話不會超過用戶的屏幕，然後讓對話框水平調整大小，所以沒有滾動條。

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin" type="text/css"?> 
<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"> 
    <prefpane> 
     <script type="application/x-javascript"><![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... 
     } 
     ]]></script> 
     <preferences><!-- ... --></preferences> 
     <!-- Just trying everything with this vbox here... --> 
     <vbox flex="1" style="overflow: auto; width: 100%; height: 100%;"> 
      <groupbox> 
       <caption label="Inline Reference Links" /> 
       <description style="word-wrap: break-word;">Inline reference links are the tiny "superscript" numbers that appear inside [special name here] and link to a reference at the bottom. <button oncommand="showExample(1)" label="Show Example" style="vertical-align: middle;" /></description> 
       <radiogroup preference="pref_mode"> 
        <radio value="0" label="Show all inline reference links by default" /> 
        <radio value="1" label="Hide all inline reference links by default" /> 
        <radio value="2" label="Only show inline reference links when hovering over containing paragraph" /> 
       </radiogroup> 
       <hbox> 
        <checkbox preference="pref_hideOtherTags" label="Hide other bracketed tags" /> 
        <button oncommand="showExample(2)" label="Show Example" style="vertical-align: middle;" /> 
       </hbox> 
       <checkbox preference="pref_useVisibility" label="Make inline reference links invisible instead of removing them*" /> 
       <description style="word-wrap: break-word; height: auto;">*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.</description> 
      </groupbox> 
     </vbox> 
    </prefpane> 
</prefwindow> 

這裏是prefwindow的截圖：當溢出參與http://i.stack.imgur.com/L3JOm.png

Answer 1

大小限制不正確地傳播。不幸的是，prefwindow和prefpane元素都包含溢出，因此描述總是要求一行的高度，並且稍後纔會發現它需要更高的高度。

可能的解決方法可能是刪除vbox上的溢出，然後明確地將vbox的高度設置爲其內容高度。您需要在設置最大寬度後執行此操作，以便第一次調用sizeToContent將獲得正確的寬度;第二個將然後得到正確的高度。

sizeToContent(); 
var vbox = document.getElementById('vbox'); 
vbox.height = vbox.boxObject.height; 
sizeToContent(); 

...

<vbox id="vbox" flex="1">