You can set dimensions for the components and their items in several ways:
Later on, you can dynamically resize the components.
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 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.
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
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
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.
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.
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
}
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.
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.
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 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 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:
<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().