When you set the label attribute of a radio button via JS, each word ends up on a new line. If you set the label attribute via the XUL tag, the text shows up properly. I have a simple test case attached. This is a problem for the calendar, which sets the labels on the repeating radio buttons depending on what date the user has chosen. (ie. I show them "Repeat every 4th Tuesday" if they have selected the 4th Tuesday as the start date... If they change the start date to the 3rd Wednesday, I change the text via JS to "Repeat every 3rd Wednesday") If anyone can think of a work around, it would be appreciated.

This is a simple test, showing the bug in action.

I don't think this is a bug. Maybe, I want to have a multiline label when the text becomes a long value. If the source of mozilla changes to the option I'm suggesting, another bug will arise when somebody wants a multiline radio. Besides, the same problem and solution is aplicable to "checkbox" element. These tests change the "label" attribute of "radio" element via JS. Look at the three files I will attach and you will understand.

Contains two radio elements, one 'as is' and the other modified.

This file contains the binding that could solve the multiline problem.

The corresponding stylesheet.

Or, try this: /* XUL file - Note the new attribute wrap="false" */ <radio label="one single long line modified via JS" wrap="false"/> /* CSS file */ radio[wrap=false] { -moz-binding: url('test.xml#slRadio'); } /* XML file - test.xml */ <binding id="slRadio" extends="chrome://global/content/bindings/radio.xml#radio"> <content> <xul:image class="radio-check" xbl:inherits="disabled,selected"/> <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> </content> </binding>