체크 상자 및 라디오 XUL 요소 자르기가 작동하지 않습니다.

확인란이 매우 긴 레이블을 잘라내어 부모 노드가 설정 한 경계에 맞출 것입니다. 체크 상자 및 라디오 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>

이뿐만 아니라 그것은 라벨을 잘라하지 않지만, 여러 라인으로 래핑 다음 crop 속성이 완전히 무시됩니다 왜 알아낼 수 없습니다.

아이디어가 있으십니까?

출처

2016-07-27 vanowm

여러 줄로 줄 바꿈이 예상되는 동작입니다. 당신은 어떤 요소의 높이도 제약하지 않습니다. 따라서 내용을 수용하기 위해 높이를 증가시켜야합니다. ['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

요소 중 하나에 높이를 설정하고 한 줄에 표시하더라도 텍스트를 자르지 않고 줄임표가 표시됩니다. 내가하는 일과 관계없이 나는 줄임표를 보여줄 수 없다. – vanowm

내가 한 간략한 테스트에서 보았던 것과 일치합니다. 나는 아직 XBL이나 소스 코드를 살펴볼 기회가 없었습니다. 나는 몇 년 전에 다른 요소에 대한 프로젝트를 위해'crop'을 사용하여 간단히 테스트했다고 회상합니다. 나는 왜 내가 현재 그것을 사용하고 있지 않은지 기억하지 못한다. – Makyen

결정한 바와 같이 이것은 Firefox의 버그입니다. 이미 filed a bug about it입니다. 이제 버그를 읽었으니, 이미이 방법을 사용하는 한 가지 방법을 결정했음을 알았습니다. 그 버그를보기 전에, 나는 을 <checkbox> (및 <radio>)에 사용하는 데 필요한 코드를 작성했습니다.

이미 작동하는 코드가있는 경우 대답을 게시하십시오.

문제는 <checkbox> 및 <radio> 모두에 XBL는 <text> 노드 <checkbox><radio> 또는 텍스트를 포함하는 <label>의 자식으로 생성되도록한다는 것이다. 그러나 자르기가 수행하는 nsIDOMXULDescriptionElement 인터페이스는 value 속성에 <label> 요소가 구현되지만 자식 노드는 <text> 노드가 구현되지 않습니다.

두 솔루션

는 <text> 노드에 대한 nsIDOMXULDescriptionElement을 구현하거나 crop 속성이 존재 (혹은이 유효한 경우에만) 때 텍스트의 label의 value 속성을 사용 중입니다. 자식 <text> 노드가 사용 된 이유는 텍스트가 너무 길어서 가로로 들어갈 수없는 경우 <label>을 여러 줄로 묶을 수 있도록하기 위해서입니다. 즉, <text> 노드를 생성하는 것은 crop 이외의 기능을 허용하기위한 것입니다.

XUL 용 XBL을 살펴보면이 구조가 multiple elements에 사용 된 것으로 보입니다. 이 구성을 사용하면 crop 이외의 다른 요소에 문제가 발생하는지 조사하지 않았습니다.

<checkbox> 및 <radio>의 경우 XBL에는 몇 가지 파일이 포함되어 있습니다.

(ID의 checkbox 및 checkbox-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 인 경우) :

,210

대신 : 우리는 능력이 모두 라벨과 다중 회선 레이블을 잘랐 원하기 때문에

이제

<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로 테스트 할 수 있습니다.

위의 테스트 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>

이 5,는 다음이 표시됩니다

는 당신이 파일을 checkbox_radio_crop.xml이 필요합니다 당신의 XUL에서 작동하려면 및 checkbox_radio_crop.css. 그런 다음 XUL에

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

줄을 추가해야합니다. 분명히, 파일은 현재 상대 URL을 사용하여 파일을 참조합니다. 따라서 XUL과 동일한 디렉토리에 위치해야합니다. 물론 chrome:// 정규화 된 URL을 사용하여 원하는 위치에 파일을 배치하여 CSS와 XUL 모두에서 필요한 파일을 참조 할 수 있습니다.

위의 변경 사항을 Firefox에 넣을 수 있지만 실제로 필요한 곳은 여러 파일에 걸쳐 있습니다. 따라서 다소 복잡합니다. 수정을 위해 변경해야하는 코드로 Mozilla bug을 업데이트하는 방법에 대해 알아 보겠습니다. 또한 crop에 대한 MDN 설명서를 사용하여 <checkbox> & <radio> 요소에서 작동하지 않는다는 것을 분명히 할 것입니다. 또한이 코드를 polyfill로 제공 할 것입니다.

출처

2016-08-02 01:50:44 Makyen

체크 상자 및 라디오 XUL 요소 자르기가 작동하지 않습니다.

답변

관련 문제