Skinning How To/Window sizing and resizing

Introduction

The default, minimum, and maximum sizes of floaters can all be changed in the viewer xml files. For consistency, all layout settings are set in the \skins\default\xui\en-us folder. Other language folders contain translation strings.

For this example, we will be using a floater that's easy to mess with: the lag meter, or floater_lagmeter.xml.

Tutorial

Open floater_lagmeter.xml in Komodo or your favorite text editor and you will see the following lines of code at the top of the file:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater
    can_close="true"
    can_drag_on_left="false"
    can_minimize="true"
    can_resize="false"
    height="150"
    name="floater_lagmeter"
    rect_control="FloaterLagMeter"
    title="Lag Meter"
    width="350">

The parameters in the <floater> element control the size, positioning, and user abilities for the lag meter.

Toggling resizing

Resizing is set by the parameter can_resize="" (true or false).

In the example above you can see that can_resize="false" prevents the floater from being resized by the user.

To allow resizing, change can_resize="" to true. The code should now read:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater
    can_close="true"
    can_drag_on_left="false"
    can_minimize="true"
    can_resize="true"
    height="150"
    name="floater_lagmeter"
    rect_control="FloaterLagMeter"
    title="Lag Meter"
    width="350">

The lag meter is now resizable.

Default size

The default floater size is set by the parameters height="" and width="" (in pixels). In the code above, you can see that the default height and width are set to height="150" and width="350".

The maximum sizes for width and height are 1024 x 768 respectively. However, you will never need to set a floater that big (and shouldn't). Floaters set to full screen will have their lower portions obscured by the toolbar.

Let's change the height="" to 500 and to width="" 300.

If you open the lag meter, you'll now notice its height and width are noticeably larger.

Min and max size

The maximum and minimum sizes for floaters are set by the parameters min_height="", min_width="", max_height="" and max_width="" (in pixels).

For the lag meter, let's set the minimum and maximum to the following:

min_height="100"
min_width="300"
max_height="500"
max_width="700"

The lag meter's size defaults to 300x500 pixels, and can be resized to anywhere between 300x100 and 700x500 pixels.

• Note: if a window contains other elements, the minimum size of those elements must be changed for the window to shrink down correctly. For example, Search (floater_directory.xml, or Communicate (floater_chatterbox.xml).