Scrolling xul windows

Some of our xul applications are designed with high resolution monitors in mind. On older or low spec computers this means the application has controls which may be drawn outside of the visible area of the window. It is important to be able to scroll the window so that these controls can be viewed and used.

Note that I spent a considerable length of time to figure out how to do this in xul as it was very poorly documented.

The first gotcha is that to enable scroll bars for a window you DO NOT add parameters to the window xul element. Instead you add a style parameter to the top level container of the window (eg a box, hbox or vbox that encloses all the other content). If there isn't a top level container that encloses all other content then make one. As the top level container is the same size as the window, the scrollbars will appear attached to that.

The second gotcha is that the container MUST have flex specified. No flex means no scrollbars.

The parameter that controls how scrollbar behaviour changes for a container is the overflow style. The most useful value is auto which automatically adds scrollbars if the container content is too small for the container. To specify the overflow style as auto use the parameter style="overflow:auto"

An example of code which will actually produce a scrollbar within the window is as follows:

  <?xml version="1.0"?>
  <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  <window title="Test scroll"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    id= "test_scroll">

    <vbox flex="1" style="overflow:auto" >
      <button id="1" label="button"/>
      <button id="2" label="button"/>
      <button id="3" label="button"/>
      <button id="4" label="button"/>
      <button id="5" label="button"/>
      <button id="6" label="button"/>
      <button id="7" label="button"/>
      <button id="8" label="button"/>
      <button id="9" label="button"/>
      <button id="10" label="button"/>

    </vbox>
   </window>