CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonxul
cikkle
cikkle

Reputation: 458

Line-wrapping XUL elements

Consider the following:

<groupbox id="keyboard" orient="horizontal">
        <button id="a" label="a" class="thinbutton"/>
        <button id="b" label="b" class="thinbutton"/>
        <button id="c" label="c" class="thinbutton"/>
</groupbox>

It's part of a dialog box in a Firefox extension. I have some javascript appending a varying number of buttons into the groupbox element (the ones above are more or less just illustrative). Usually on the order of 40-80 buttons. They run off the edge of the window, though, and the only way to get to them is to resize the window. I'd like them to wrap at the end, the same way text would in a text element. I've seen one other seemingly pertinent question on here about this and the solution was to wrap the buttons in a <description> tag but that seems not to work for me.

What are the correct CSS or XUL attributes to use to cause XUL elements to wrap?

Upvotes: 2

Views: 301

Answers (1)

Wladimir Palant
Wladimir Palant

Reputation: 57651

Wrapping the buttons in a <description> element is the way to go here - but you should remember to add a flex="1" attribute (the <description> element needs to span the entire width of the <groupbox> element rather than stretch to its content. This works for me:

<groupbox id="keyboard" orient="horizontal">
  <description flex="1">
    <button id="a" label="a" class="thinbutton"/>
    <button id="b" label="b" class="thinbutton"/>
    <button id="c" label="c" class="thinbutton"/>
    ...
  </description>
</groupbox>

Upvotes: 2

Related Questions