Intermediate

Opening UI Elements in the Full-screen Mode

You can expand any UI element, be it a Webix view or an HTML element, to the full size of the page with the fullscreen helper.

General Principles

To expand the UI element, pass it or its ID to the set method:

webix.fullscreen.set("list");

To minimize the UI element, call exit:

webix.fullscreen.exit();

Note that only one UI element can be in the full-screen mode simultaneously. If one of the views is expanded, and you expand another view, the first one will be minimized.

Related sample: Fullscreen: List

Any view or HTML element can be opened in the full-screen mode. You can browse these examples:

Configuring the Fullscreen Container

When a UI element is in the full-screen mode, it is placed in a special container. The container has a header with the "close" icon inside.

You can customize the container. Namely:

add a caption to the header:

webix.fullscreen.set("chart", { head:"My Financial Statistics" });

fully redefine the header by passing a configuration object in the head field:

webix.fullscreen.set("chart",{
    head:{
        view:"toolbar", elements:[
            { view:"label", label:"My Financial Statistics" },
            { view:"icon", icon:"mdi mdi-fullscreen-exit", click:function(){
                webix.fullscreen.exit();
            } }
        ]
    }
});

remove header completely

webix.fullscreen.set("list", { head: false });

In this case, you will be able to exit fullscreen mode by calling webix.fullscreen.exit().

style the container via the css field:

webix.fullscreen.set("chart",{
  css: "fullscreen", 
  head: "Fullscreen enabled"
});

Window in Fullscreen

Window has the fullscreen setting of its own. So if you want to switch windows in and out of the full-screen mode, there are two alternatives that are different in the way they handle the dynamic changes:

1. window.config.fullscreen that requires you to reset the window positioning

var win = webix.ui({
    view:"window",
    left:100, top:100, move:true,
    head:{
        cols:[
            {},
            {
                view:"icon", icon:"wxi-search", click:function(){
                    if (win.config.fullscreen){
                        win.define({ fullscreen: false, top:100, left:100 });
                    }
                    else {
                        win.define({
                            fullscreen: true, top:0, left:0, position:false
                        });
                    }
                    win.resize();
                }
            }
        ]
    }
});
win.show()

2. webix.fullscreen.set that takes care of the positioning

var win = webix.ui({
    view:"window", position:"center", move:true,
    head:{
        cols:[
            {},
            {
                view:"icon", icon:"mdi mdi-fullscreen",
                click: function(){
                if (win.config.fullscreen){
                    webix.fullscreen.exit();
                }
                else {
                    webix.fullscreen.set(win);
                }
            }}
        ]
    },
    body:"Content"
});
win.show();

Related sample: Fullscreen: Window