Question

I have strange problem with XUL layouts.
My current code:

<xul:vbox>
  <xul:hbox> .. some elements .. </xul:hbox>
  <xul:hbox>
    <xul:hbox> .. some elements .. </xul:hbox>
    <xul:hbox flex="1">
      <my:button anon-id="btn1" label="Sample button 1"/>
      <my:button anon-id="btn2" label="Sample button 2"/>
      ...
      <my:button anon-id="btnN" label="Sample button N"/>
    </xul:hbox>
    <xul:hbox> .. some elements .. </xul:hbox>
  <xul:hbox>
</xul:vbox>

I need to make hbox with buttons resizable, but if buttons doesn’t fit in container – it should be wrapped for 2 (or more) lines. Currently, when I shrink browser size – some of buttons hiding behind the right border of window.

my:button is box with display: inline-block; and some content inside.

I have tried float: left on button, display: block, overflow: visibel and other tricks worked in HTML/CSS.

Thanks for attention.

Answer 1

Use the <description> tag instead of the <hbox> surrounding the buttons.