XUL prefwindow大小问题 [英] XUL prefwindow size problems

问题描述

我有一个Firefox插件，它包含一个< prefwindow> 来控制我的插件的偏好设置。它包含2个独立的< description> 标签，以在某些地方提供更多信息（见下文）。我有一些JavaScript，当对话框加载设置CSS max-height 和 max-width 用户的屏幕的尺寸（我发现这是必要的，因为否则对话框将水平地扩展到屏幕的边缘，使得一个< description> code> word-wrap：break-word set - max-width 和 max-height ，所以有一个滚动条，即使有对话框垂直扩展的空间（我有 overflow：auto 设置在最上面的盒子，所以东西不会得到切断没有滚动条）。

基本上，我想要的是对于< description> 标签的内容来包装，所以对话不会比用户的屏幕长，然后对话框也要水平调整大小，一个滚动条。

 <？xml version =1.0？> 
<？xml-stylesheet href =chrome：// global / skintype =text / css？> 
< prefwindow xmlns =http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xulxmlns：html =http://www.w3.org/1999/xhtml style =width：100％; height：100％; sizemode = 最大化 > 
< 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）{
 //不重要... 
} 
]]>< / script> 
< preferences><！ -  ...  - >< / preferences> 
<！ - 只需在这里用vbox试试一切...  - > 
< vbox flex =1style =overflow：auto; width：100％; height：100％;> 
< groupbox> 
< caption label =嵌入式参考链接/> 
< description style =word-wrap：break-word;>内嵌参考链接是在[特殊名称]内出现的微小上标数字，链接到底部的参考。 < button oncommand =showExample（1）label =Show Examplestyle =vertical-align：middle; />< /描述> 
< radiogroup preference =pref_mode> 
< radio value =0label =默认显示所有内嵌参考链接/> 
< radio value =1label =默认隐藏所有的内嵌参考链接/> 
< radio value =2label =仅当鼠标悬停在包含段落时才显示内嵌参考链接/> 
< / radiogroup> 
< hbox> 
< checkbox preference =pref_hideOtherTagslabel =隐藏其他方括号/> 
 < / hbox> 
 < description style =word-wrap：break-word; height：auto;> *当内联引用链接不可见时，它们不能被看到，但仍然占用页面空间。当将鼠标悬停在包含的段落上时，如果设置为显示内联参考链接，则此选项可用于防止在显示参考链接时发生移位。< / description> 
< / groupbox> 
< / vbox> 
< / prefpane> 
< / prefwindow> 
  

以下是prefwindow的屏幕截图： http://i.stack.imgur.com/L3JOm.png

解决方案

当涉及到溢出时，大小约束无法正确传播。不幸的是，prefwindow和prefpane元素都包含溢出，所以描述总是要求一行的高度，只有稍后才会发现它需要更高的高度。

解决方法可能是删除vbox上的溢出，然后明确地将vbox的高度设置为其内容高度。您需要在设置最大宽度后执行此操作，以便首次调用sizeToContent将获得正确的宽度;第二个会得到正确的高度。

  sizeToContent（）; 
 var vbox = document.getElementById（'vbox'）; 
 vbox.height = vbox.boxObject.height; 
 sizeToContent（）; 
  

...

 < vbox id =vboxflex =1> 
  

I have a Firefox add-on with a <prefwindow> to control the preferences for my add-on. It contains 2 separate <description> 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 max-height and max-width 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 <description> (which has CSS word-wrap: break-word set - Forcing a description widget to wrap) fits on one line).

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 max-width and max-height, so there is a scrollbar even though there is room for the dialog to expand vertically (I have overflow: auto set on the topmost vbox just so stuff wouldn't get cut off without a scrollbar).

Basically, what I want is for the contents of the <description> 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.

<?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>

Here is a screenshot of the prefwindow: http://i.stack.imgur.com/L3JOm.png

解决方案

Size constraints don't propagate correctly when overflow is involved. Unfortunately the prefwindow and prefpane elements both include overflow so the description will always claim a height of one line and only later will it find out that it needs more height.

A possible workaround might be to remove the overflow on the vbox and then explicitly set the vbox's height to its content height. You need to do this after setting the maximum width, so that the first call to sizeToContent will get the width right; the second will then get the height right.

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

...

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

这篇关于XUL prefwindow大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！