2016-07-27 12 views
0

親ノードによって設定された境界に収まるように、チェックボックスの非常に長いラベルをトリミングしようとしています。 crop属性は完全に無視される理由を私は理解することはできません。チェックボックスとラジオXUL要素のトリミングが機能しません

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1"> 
    <vbox style="width: 35em; overflow: hidden;" flex="1"> 
     <hbox> 
      <checkbox crop="center" style="max-width: 35em;" label="1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
     </hbox> 
    </vbox> 
</dialog> 

は、それがラベルをトリミングしていないだけでなく、複数の行にそれをラップします。

アイデア?

+0

複数行の折り返しが予想されます。あなたの要素の高さを制限するものは何もありません。従って、それらは内容を収容するために高さを増加させるべきである。 ['maxheight'](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxheight)XUL属性、または「' 'max-height''(https://)」を参照してください。 developer.mozilla.org/en-US/docs/Web/CSS/max-height)CSSプロパティ。 – Makyen

+0

いずれかの要素に高さを設定しても、1行に表示されてもテキストは切り抜かれません。省略記号は表示されません。 私が何をしても、私はそれを省略記号にすることはできません。 – vanowm

+0

これは私が行った簡単なテストで見たものと一貫しています。私はまだ何が起こっているのかを見るためにXBLやソースコードを見てみる機会はありませんでした。私は、2,3年前に別の要素のプロジェクトで「作物」を使って簡単にテストしたことを思い出しています。なぜ私は現在それを使用していないのか思い出さない。 – Makyen

答えて

2

あなたが決定したとおり、これはFirefoxのバグです。あなたはすでにfiled a bug about itです。バグを読んだので、あなたはすでにこれを動作させる方法を決めていることがわかります。そのバグを見る前に、私はすでにcrop<checkbox>に(そして<radio>)働かせるために必要なコードを書いていました。

あなたのためのコードが既にある場合は、回答を投稿してください。

問題が<checkbox><radio>の両方のためにXBL<checkbox>または<radio>のためのテキストを含む<label>の子として作成される<text>ノードを引き起こすことがあります。しかし、nsIDOMXULDescriptionElementインターフェイスは、クロッピングとは何かで、value属性の<label>要素に対して実装されますが、子の<text>ノードには実装されません。

二つの溶液は、<text>ノードに対してnsIDOMXULDescriptionElementを実装、またはcrop属性は(それが有効である場合にのみ、おそらく以上)存在する場合にテキストをlabelvalue属性を使用することのいずれかです。子の<text>ノードが使用される理由は、テキストが水平に収まらない場合、<label>を複数の折り返し行にすることです。言い換えれば、<text>ノードの作成は、crop以外の機能を許可するためのものです。

XULのXBLを見ると、multiple elementsで使用されているようです。このコンストラクトを使用すると、crop以外の要素で他の要素に問題が発生するかどうかは調査していません。

<checkbox>および<radio>の場合、XBLにはいくつかの異なるファイルが含まれています。

(IDのcheckboxcheckbox-crop-with-spacingの結合に)<checkbox>のために必要とされる行は次のとおりです。

<xul:label class="checkbox-label" xbl:inherits="value=label,accesskey,crop" flex="1"/> 

の代わり:ラジオのために

<xul:label class="checkbox-label" xbl:inherits="xul:text=label,accesskey,crop" flex="1"/> 

(複数ファイル)に必要とされるライン(バインディングIDがradioおよびradio-with-spacingの場合):

の代わり:

<xul:label class="radio-label" xbl:inherits="xul:text=label,accesskey,crop" flex="1"/> 

、私たちは能力が両方のラベルと複数行のラベルをトリミングしていたいので、私たちはこれらの行を変更する必要はありません。crop属性が存在する場合にのみ適用される追加のXBLバインディングを作成する必要があります。

新しいバインディング

checkbox_radio_crop.xml): crop属性が存在する場合

<?xml version="1.0"?> 
<bindings id="checkboxAndRadioCropBindings" 
    xmlns="http://www.mozilla.org/xbl" 
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
    xmlns:xbl="http://www.mozilla.org/xbl"> 

    <binding id="checkbox-crop" 
      extends="chrome://global/content/bindings/checkbox.xml#checkbox"> 
    <content> 
     <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/> 
     <xul:hbox class="checkbox-label-box" flex="1"> 
     <xul:image class="checkbox-icon" xbl:inherits="src"/> 
     <xul:label class="checkbox-label" 
        xbl:inherits="value=label,accesskey,crop" flex="1"/> 
     </xul:hbox> 
    </content> 
    </binding> 

    <binding id="checkbox-crop-with-spacing" 
      extends="chrome://global/content/bindings/checkbox.xml#checkbox"> 
    <content> 
     <xul:hbox class="checkbox-spacer-box"> 
     <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/> 
     </xul:hbox> 
     <xul:hbox class="checkbox-label-center-box" flex="1"> 
     <xul:hbox class="checkbox-label-box" flex="1"> 
      <xul:image class="checkbox-icon" xbl:inherits="src"/> 
      <xul:label class="checkbox-label" 
        xbl:inherits="value=label,accesskey,crop" flex="1"/> 
     </xul:hbox> 
     </xul:hbox> 
    </content> 
    </binding> 


    <binding id="radio-crop" 
      extends="chrome://global/content/bindings/radio.xml#radio"> 
    <content> 
     <xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled"> 
     <xul:hbox class="radio-check-box2" flex="1"> 
      <xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/> 
     </xul:hbox> 
     </xul:hbox> 
     <xul:hbox class="radio-label-box" align="center" flex="1"> 
     <xul:image class="radio-icon" xbl:inherits="src"/> 
     <xul:label class="radio-label" 
        xbl:inherits="value=label,accesskey,crop" flex="1"/> 
     </xul:hbox> 
    </content> 
    </binding> 

    <binding id="radio-crop-with-spacing" 
      extends="chrome://global/skin/globalBindings.xml#radio"> 
    <content> 
     <xul:hbox class="radio-spacer-box"> 
     <xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled"> 
      <xul:hbox class="radio-check-box2" flex="1"> 
      <xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/> 
      </xul:hbox> 
     </xul:hbox> 
     </xul:hbox> 
     <xul:hbox class="radio-label-center-box" flex="1"> 
     <xul:hbox class="radio-label-box" flex="1"> 
      <xul:image class="radio-icon" xbl:inherits="src"/> 
      <xul:label class="radio-label" 
        xbl:inherits="value=label,accesskey,crop" flex="1"/> 
     </xul:hbox> 
     </xul:hbox> 
    </content> 
    </binding> 

</bindings> 

はその後、CSSがバインディングを適用する(checkbox_radio_crop.css):

checkbox[crop] { 
    -moz-binding: url('checkbox_radio_crop.xml#checkbox-crop'); 
} 
checkbox-with-spacing[crop] { 
    -moz-binding: url('checkbox_radio_crop.xml#checkbox-crop-with-spacing'); 
} 
radio[crop] { 
    -moz-binding: url('checkbox_radio_crop.xml#radio-crop'); 
} 
radio-with-spacing[crop] { 
    -moz-binding: url('checkbox_radio_crop.xml#radio-crop-with-spacing'); 
} 

その後あなたが質問で提供したものに基づいているXULでテストすることができます:

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<?xml-stylesheet href="checkbox_radio_crop.css" type="text/css"?> 

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1"> 
    <groupbox > 
     <caption label="Test checkboxes"/> 
     <checkbox crop="start" style="max-width: 35em;" label="crop=&quot;start&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198 crop=&quot;start&quot; "/> 
     <checkbox crop="center" style="max-width: 35em;" label="crop=&quot;center&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
     <checkbox crop="end" style="max-width: 35em;" label="crop=&quot;end&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
     <checkbox    style="max-width: 35em;" label="no crop 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
    </groupbox> 
    <groupbox> 
     <caption label="Test radios"/> 
     <radiogroup> 
      <radio crop="start" label="crop=&quot;start&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198 crop=&quot;start&quot;" /> 
      <radio crop="center" label="crop=&quot;center&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
      <radio crop="end" label="crop=&quot;end&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
      <radio    label="no crop 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/> 
     </radiogroup> 
    </groupbox> 
</dialog> 

これ以上のテストXULは以下が表示されたダイアログウィンドウを開くために使用されます。

checkbox and radio test dialog window

それはあなたのXULで働くようにするには、ファイルにcheckbox_radio_crop.xmlが必要になりますし、 checkbox_radio_crop.css。次の行を追加する必要があります:

<?xml-stylesheet href="checkbox_radio_crop.css" type="text/css"?> 

をXULに追加する必要があります。明らかに、ファイルは現在、ファイルを参照するために相対URLを使用しています。したがって、XULと同じディレクトリに配置する必要があります。もちろん、完全修飾のchrome:// URLを使用して、必要な場所にファイルを配置して、CSSとXULの両方で必要なファイルを参照することができます。

Firefoxに上記の変更を加えることができますが、実際には複数のファイルにまたがる必要があります。したがって、やや複雑です。修正のために変更する必要のあるコードをMozilla bugに更新する方法について説明します。さらに、cropのMDNドキュメントを参照して、<checkbox> & <radio>の要素で動作していないことを明確にします。私はこのコードをpolyfillとしても提供します。

関連する問題