Setting borders of components.

Problem

How to set borders that will edge a component?

Solution

DHTMLX Touch allows to set border, padding and margin of a component.

 
As border, padding and margin are a layout feature, they're controlled at layout level. Specify them before layout blocks ('cols' or 'rows') to which you wish to apply the desired properties.

Border types

There are 5 border types:

'line'(default) 'wide' 'head' 'clean' 'space'

Setting the desired type of border

The type of border is set by the parameter type.

dhx.ui({  
         type:"space", // specifies a type of the border
	 rows:[{ ... }]
})

Setting padding/margin

APPLICABLE FOR: 'wide', 'space' border types

The padding/margin are set by the related parameters: padding and margin.

dhx.ui({
	type:"space", 
        margin:30,
        padding:20, 
        cols:[{ }]
});
 
 
type:"space",
cols:[{ ... }]
 
type:"space",
padding:20,
cols:[{ ... }]
 
type:"space",
margin:30,
cols:[{ ... }]
type:"space",
padding:20,
margin:30,
cols:[{ ... }]

Related sample: 01_views/02_layout_borders.html
Related sample: 01_views/05_layout_paddings.html