You can set dimensions for the components and their items in 5 ways:
Later on, you can dynamically resize the components.
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
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 layout, don't forget that layout rows and columns will adjust to the sizes of the nested components automatically.
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
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
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
During dynamic resizing or when the component is inited 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 nd height values and take smaller space.
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",
...
});
</script>
Auto sizing adjusts the component or its item to available space (parent container, if these's the one; otherwise, to the document body). If there're several components or several layout columns on the page, each of which, they will equally distribute available space among them.
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
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.
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
columns:[
{ 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
webix.ui({
view:"list",
width:250,
type:{
height:"auto"
}
});
//dataview with variable item width and height
webix.ui({
view:"dataview",
width:250,
type:{
height:"auto",
width:"auto"
}
});
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
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: Autosizing Items to Content
Webix offers “full screen” mode to make the application take all available screen space while at the same time hiding browser’s toolbars. In this mode, the app will take up the entire screen of the mobile device.
Fullscreen mode is enables with webix.ui.fullScreen() command before UI initialization:
webix.ui.fullScreen();
webix.ui({
rows:[...]
});
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"}
...
})
Related sample: Toolbar: Multiple Rows
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 its 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:
<div id="testA" style='width:50%; height:50%;'></div>
...
grid = new webix.ui({
container:"testA",
view:"datatable",
...
});
webix.event(window, "resize", function(){ grid.adjust(); })
Note that events to HTML nodes are attached via event() method rather than attachEvent().