Problem:
I have the following code which looks like this:
{id:'SetPopUp',view:'window',head:'',position:'center',move:true,body:
{rows:[
{height:7},
{height: 140, cols:[
{width:7},
{css: { border: "2px solid #b3d9ff"},rows:[
{id:"ll1", view:"label", label:"Select Tag", align:'left'},
{id:'r1', view:"radio", value:1, height:50, options:[{id:1, value:"Tag1"},{id:2, value:"Tag2"}], align:'left'},
{id:"l1", view:"label", label:"", width:70 , align:'left'},
{id:"c1", view:"combo",options:[], width:190 , align:'left'}]},
{view:"label", label:"vs", width: 30, align:'center' },
{css: { border: "2px solid #99ffbb"},rows:[
{id:"ll2", view:"label", label:"Select Tag", align:'left'},
{id:'r2', view:"radio", value:2, height:50, options:[{id:1, value:"Tag1"},{id:2, value:"Tag2"}], align:'left'},
{id:"l2", view:"label", label:"Select Feature Set", width:70 , align:'left'},
{id:"c2", view:"combo",options:[], width:190 , align:'left'}]},
{width:10},
]},{height:4},
{cols:[
{width:310},
{view:'button',value:'Diff',width:60,click:function() {
//some code
}},
{view:'button',value:'Close',align:'center',width:60,click:function(){this.getTopParentView().hide();}}
]}
]}
};
and it creates a GUI like this
But the blue (#b3d9ff) and green (#99ffbb) color border does not slow in the bottom area. Can someone help me bring the border to be displayed in the lower bottom area as well?
Solution:
Why this does not work
You must not set borders, sizes, margins and paddings via CSS. This is a known limitation. In the resources below, they do not say per se that borders cannot be set this way, but this is the same case, because borders make div 2px wider and higher, so the JS cannot account for them during sizing and positioning.
What you should do
Use JS means. Views have settings for borders to add them, and only then set their color via CSS. Only the color or style (like solid or dotted). Not sizes.
In this case, the easiest way to add borders around those two forms would be to add type: "form". https://snippet.webix.com/18zzs2jn
