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 Header

When a UI element is in the full-screen mode, there is a header with the "close" icon above it.

You can add a caption to the header:

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

You can also fully redefine the header by passing a configuration object in head:

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();
            } }
        ]
    }
});

Related sample:  Fullscreen: Cusmom Header

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()

Related sample:  Window: Full-screen mode

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

Back to top