Beginner

Sizing Components

You can set dimensions for the components and their items in several ways:

Later on, you can dynamically resize the components.

Setting Correct Size Values

The width and height of the widget must have number values. The usage of string values is incorrect and will cause breaks in the sizing logic.

webix.ui({
    id:"layout",
    height:600,
    width:700
});

You can use a string value for setting the size of a view within the type (or its alias, item) definition. For example:

{ 
    view:"list", 
    type:{height:"auto"}
}

Fixed Sizing

Fixed dimensions are set by the width and height parameters that can be applied to components and their items as well as to the whole layout.

Layout Sizing

webix.ui({
    id:"layout",
    height:600,
    width:700,
    rows:[
        {template:"row 1",height:20},
        {template:"row 2"},
        {cols:[
            {id:"a1", template:"column 1", width:150}
        ]}
    ]
}).show();

Related sample:  Layout and Resizer

When giving fixed dimensions to the components in the layout, don't forget that layout rows and columns will adjust to the sizes of the nested components automatically.

Control Sizing

Controls feature the inputWidth and inputHeight properties that define the dimensions of input areas and button text values.

Button Sizing

{ 
    view:"button", 
    value:"Prev", 
    type:"prev", 
    width: 100, 
    inputWidth: 70,
    height: 20 
}

Read more about the possibilities of control sizing in the Controls Guide

Component Item Sizing

If you want to specify the dimensions of an item rather than of a component, include height and width parameters into the component's type property.

Dataview Component and Items with Fixed Dimensions

webix.ui({
    view:"dataview",
    width: 520,     // component's dimensions
    height: 270,
    type:{ 
        height: 90, //  dimensions of each DataView item
        width: 250 
    }
});

Related sample:  Dataview Italic

Sizing Limits

During dynamic resizing or when the component is initialized in layout with at least one resizer line, minimum and maximum dimensions are very helpful. They are set with the help of the following properties:

  • minWidth and minHeight (number) - on resizing the component cannot take less space than specified. If more space is available, the component will take it.

  • maxWidth and maxHeight (number) - on resizing the component cannot take more space than specified. At the same time, the component may take smaller width and height values and take less space.

Auto Sizing

1. Autosizing to the dimensions of the parent container

By default, components are autosized to the dimensions of the parent HTML-container.

Inline CSS

<div id="areaA" style="width: 320px, height: 400px"></div>
<script type="text/javascript" charset="utf-8">
    webix.ui({
         container: "areaA", // corresponds to the value of <div> id parameter
         view:"list", 
         // list configuration
    });
</script>

Auto sizing adjusts the component or its item to available space (parent container, if there is one; otherwise, to the document body). If there are several components or several layout columns on the page, each of them will be given a fair share of the available space.

2. Using 0 values for autosizing

The correct way to autosize a component to the available space is to provide 0 for both its width and height. While some widgets, such as List or Chart have such dimensions by default, the sizes of other widgets may differ.

For example, the default width and height of Calendar are set to 260 and 250 respectively. So you can autosize Calendar to the available space as follows:

{ 
    view:"calendar", 
    width:0, 
    height:0 
}

3. Content Autosizing

If you define autoheight as true the height of layout rows will be adjusted to their contents.

How does this property work? By setting autoheight for the template, we enable automatic calculation of the height of the template contents (usually, text). This height will be the template's height and the corresponding layout row will adjust to this parameter.

Autoheight for view Template

rows:[
    { template:"html->my_box1", autoheight:true},
    { template:"Area 1"},
    { template:"html->my_box2", autoheight:true}
]

Related sample:  Autosizing to Content

Some components also feature the autowidth property.

4. Item Content Autosizing

Adjusting dimensions of component items to their contents depends on the component.

Datatable column width can be adjusted to its contents as:

Datatable Column Sizing

columns:[
    { id:"rank", header:"", css:"rank", adjust:true },
    // more columns
]

Related sample:  Adjusting Columns to the Content

Datatable row height can be automatically adjusted to the cell contents of the chosen column:

Datatable Row Autoheight

webix.ui({
    view:"datatable", columns:[// datatable columns], 
    fixedRowHeight:false,  rowLineHeight:25,
    on:{
        "onresize":webix.once(function(){ 
            this.adjustRowHeight("title", true); 
        })
    }
});

Related sample:  Row Auto-Height

Auto height for List items can be set by the "auto" setting within its type property which deals with the dimensions of each item:

List with Variable Item Height

webix.ui({
    view:"list",
    width:250,
    type:{
        height:"auto"
    }
});

Dataview items can also be autosized by the type settings, but their height and width adjust to available space rather than content:

Dataview with autosized items

webix.ui({
    view:"dataview",
    width:250,
    type:{
        height:"auto", 
        width:"auto"
    },
    xCount:2, yCount:4
});

Related sample:  Dataview: Autosizing Items to Available Space

In addition, width and height of Dataview items can be adjusted to the predefined dimensions of HTML elements in their template. For these needs, set sizeToContent property to true:

DataView Item Sizing

webix.ui({
    view:"dataview",
    template:"#title#<br/> Year: #year#, rank: #rank#",
    sizeToContent:true
});

Note that even in case these HTML elements are different for different items, the dimensions are measured only once (for the first input, as a rule) and then sizing is performed. At the same time, some of them may be smaller or bigger.

Related sample:  DataView: Autosizing Items to Content

There may be a situation where the font is not loaded, so the text width may be calculated incorrectly. To avoid this behavior, we recommend installing a helper to preload the font.

Adjusting Mobile Apps to Screen Size

Webix offers "full screen" mode to make the application take all available screen space. In this mode, the app will take up the entire screen of the mobile device.

Fullscreen mode is enabled with webix.ui.fullScreen() command before UI initialization:

webix.ui.fullScreen();
webix.ui({
    rows:[...]
});

Relative Sizing

Relative dimensions can be defined with the help of the {gravity:x} parameter which makes one component x times bigger then the other.

One of the 'Save' buttons is twice bigger then the other one.

webix.ui({
    view:"toolbar",
    { view:"button", value:"Load", width:200 },
    {  margin:4, borderless:true, rows:[
        { view:"button", value:"Save",  gravity:2 },
        { view:"button", value:"Save"}
        // other elements
    ]}
});

Related sample:  Toolbar: Multiple Rows

Dynamic Sizing

Dynamic sizing ensures adequate visibility of components regardless of screen size and makes them dynamically respond to changing window dimensions.

By default, dynamic sizing is true for components that feature no sizing of their own and are not placed into any sized HTML container. Such components take space of the entire screen and are resized as the browser window resizes.

To enable dynamic sizing in other situations, take the following steps:

  • create div container and give relative dimensions to it;
  • put a Webix component into it (define the container property within the component);
  • ensure that the component is adjusted to its container each time you resize browser window.
<div id="testA" style='width:50%; height:50%;'></div>
...
grid = webix.ui({
    container:"testA",
    view:"datatable",
    // datatable configuration
});
 
webix.event(window, "resize", function(){ grid.adjust(); })

Note that events are attached to HTML nodes via the event() method rather than via attachEvent().

Related Articles:

Back to top