Webix弹窗内Border Box底部边框未完全显示的解决求助

问题原因 #

你遇到的底部边框消失问题，是因为Webix布局容器默认使用content-box盒模型——边框会额外占用容器外部空间，而你给父级cols容器设置了固定高度140px，带边框的子容器总高度（内容高度+上下边框）超过了140px，底部边框被父容器裁剪隐藏了。

解决方案 #

给带边框的容器添加box-sizing: border-box样式，让边框被包含在容器定义的高度内，同时设置容器高度为100%以撑满父容器空间。

修改后的完整代码 #

{
  id:'SetPopUp',
  view:'window',
  head:'',
  position:'center',
  move:true,
  body: {
    rows:[
      {height:7},
      {
        height: 140, 
        cols:[
          {width:7},
          {
            css: { 
              border: "2px solid #b3d9ff",
              box-sizing: "border-box",
              height: "100%"
            },
            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",
              box-sizing: "border-box",
              height: "100%"
            },
            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(){
            //some code
          }},
          {view:'button',value:'Close',align:'center',width:60,click(){this.getTopParentView().hide();}}
        ]
      }
    ]
  }
};

补充说明 #

• box-sizing: border-box是CSS标准属性，会让元素的宽度和高度包含内边距、边框，避免额外空间溢出
• 设置height: 100%确保带边框的容器完全填充父级cols的140px高度，不会出现留白

内容的提问来源于stack exchange，提问作者Jeevan