Popup and Window Positioning

By default window and popup (provided that they don't occupy the whole screen) will be placed in the upper left corner of the screen stuck to browser borders.

To avoid this, the position should be set.

Absolute Positioning

Left and top offset can be defined right in the component constructor:

webix.ui({
    view:"window",
    width:300,
    height:200,
    top:100, 
    left:100
}).show();

At the same time, position can be set dynamically, by passing these parameters into its show(); function:

webix.ui({
    view:"window",
    ...
}). show({
    x:300, // left offset from the right side
    y:50 // top offset
});

Related sample: Window Offset

Another way is to use setPosition():

$$('my_window').setPosition(100, 100); //left and top offset

Relative Positioning

Relative positioning is achieved with the help of the position property. It takes the following values:

center - to place window or popup at the center of the screen;
top - to place window or popup at the top of the screen with center horizontal alignment. Also, "top" positioning adds slide animation: the window will slide from the top of the screen when shown and slide back when closed.

webix.ui({
    view:"window",
    position:"center" // or "top"
    // ..window config
 
});

Related sample: Window: Centralization

Positioning Relative to HTML Node

Show() method allows specifying an HTML node near which a window will be shown.

$$("window").show(node);

By default, such pattern places the window below the node. To redefine this, pass position object as well:

$$("window").show(node, {pos:"top"});

Possible position values here are top, bottom (default), left and right.

To shift a window in relations to the node, pass its vertical and horizontal positions together with pos:

$$("window").show(node, {pos:"top", x:10, y:10});

Setting Position via State Object

By default, position is set in one of the two ways, depending on the size of a window:

In fullscreen:true mode a window occupies the whole screen with top and left = 0;
If a window or popup is non-sized, it will adjust to the dimension of the component in the body or will take default values (minHeight: 200, minWidth: 300);
If a window or popup features custom size (width and height properties in its constructor), it is placed in the left upper corner of the screen with its top and left offsets being 0.

This default position can be changed or amended with the help of the state object used in the function of the position property:

webix.ui({
    view:"window",
    head:"",
    body:{...},
    position:function(state){ 
        state.left = 20; // fixed values
        state.top = 20;
        state.width -=60; // relative values
        state.height +=60;
    }
});