Sizing components

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

Later on, you can dynamically resize the components.

Fixed Sizing

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

Layout Sizing

        {template:"row 1",height:20},
        {template:"row 2"},
            {id:"a1", template:"column 1", width:150}

Related sample:  Layout and Resizer

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

Control Sizing

Controls feature inputWidth and inputHeight properties that define 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 the component, include height and width parameters into the component's type property .

Dataview Component and Items with Fixed Dimensions

    width: 520,         //  component's dimensions
    height: 270,
        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 takes 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 smaller 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">
         container: "areaA", //corresponds to the value of <div> id parameter

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 which, they will equally distribute available space among them.

2.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 to the template we let it 'go' to its contents (text, as a rule) and calculate itself the height of the text on the screen. This height will be the template's height and the corresponding layout row will adjust to this parameter.

Autoheight for view Template

    { 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.

3.Item Content Autosizing

To adjust item's width to its contents you should use adjusting or auto height depending on the component.

Datatable column width is adjusted to its contents:

Datatable Column Sizing

    { id:"rank", header:"", css:"rank", adjust:true },

Related sample:  Adjusting columns to the content

Auto height is set within component type that defines properties of an item (not the whole component). Each item is adjusted to its content, which may result in variable dimensions of items:

//list with variable item height
// DataView with variable item width and height

In addition, component width and height can be adjusted to the predefined dimensions of HTML elements of its items. For these needs, set sizeToContent property for a component:

DataView Item Sizing

    template:"#title#<br/> Year: #year#, rank: #rank#",

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:  Autosizing Items to Content

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:


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.

    { view:"button", value:"Load", width:200 },
    {  margin:4, borderless:true, rows:[
        { view:"button", value:"Save",  gravity:2 },
        { view:"button", value:"Save"}

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 = new webix.ui({
webix.event(window, "resize", function(){ grid.adjust(); })

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

Related Articles:

Back to top