I’m having a bit of a rendering issue in MS Edge when I have a (moderately complex) form attached to a layout that is attached to a tabbar. The layout is there because I also have a toolbar to show on that tab; I’ve found that the issue is still there even when the layout is removed and just the form is attached directly to the tabbar cell.
The issue is that all of the fields in the first section of the form are compressed very tightly together, even overlaying each other a bit. However, if I simply click around in the white space on the rest of the form, after 2-3 clicks the fields will expand in size and space and display as intended.
Opening this page in Chrome renders as expected immediately without having to do the mouse clicks. So it appears to be just an Edge rendering issue; I’m not sure how much there is to be done about that, but I thought I’d report it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Machine Info</title>
</head>
<body>
<div id="divLayout"></div>
<!-- DHTMLX Files -->
<link rel="stylesheet" href="/Resources/dhtmlx/v6.4.4/suite.min.css" type="text/css">
<script type="text/javascript" src="/Resources/dhtmlx/v6.4.4/suite.min.js"></script>
<script type="text/javascript">
// Global Object Variables
var tabbar = new dhx.Tabbar("divLayout",{
tabWidth: 150,
views: [
{id:"info",tab:"Machine Info",css:"panel flex"},
{id:"vendors",tab:"Vendors",css:"panel flex"},
{id:"service",tab:"Service",css:"panel flex"},
{id:"pm",tab:"PM",css:"panel flex"},
{id:"parts",tab:"Parts List",css:"panel flex"},
{id:"shipinst",tab:"Shipping Inst.",css:"panel flex"}
]
});
var layoutMachineInfo = new dhx.Layout(null,{
rows: [
{id:"toolbar-cell",height:50,gravity:false},
{id:"form-cell"}
]
});
tabbar.getCell("info").attach(layoutMachineInfo);
var formMachineInfo = new dhx.Form(null,{
gravity: false,
rows: [
{
cellCss: "dhx_layout-cell--bordered",
gravity: false,
cols: [
{
rows: [
{type:"input",id:"MachineNumber",label:"Machine Number",labelWidth:120,labelInline:true,required:true,gravity:false},
{type:"input",id:"MachineDescription",label:"Description",labelWidth:120,labelInline:true,gravity:false},
{type:"input",id:"Location",label:"Location",labelWidth:120,labelInline:true,gravity:false},
{type:"input",id:"PropertyIDNumber",label:"Asset Number",labelWidth:120,labelInline:true,gravity:false},
{type:"input",id:"MfgYear",label:"Year of Mfg.",labelWidth:120,labelInline:true,gravity:false},
{type:"datepicker",id:"DatePurchased",label:"Date Purchased",labelWidth:120,labelInline:true,dateFormat:"%Y-%m-%d",gravity:false},
{type:"select",id:"CategoryID",label:"Category",labelWidth:120,labelInline:true,options:[{value:"",content:"Please select..."}],gravity:false},
{type:"select",id:"BranchCode",label:"Branch",labelWidth:120,labelInline:true,required:true,options:[
{value:"",content:"Please select..."},
{value:"Q7",content:"Q7"},
{value:"Q2",content:"Q2"}
],gravity:false}
]
},
{padding:"10px",rows:[{id:"MachinePicture",type:"textarea",label:"Image",readOnly:true,height:375}]}
]
},
{
gravity: false,
title: "Dimensions",
cols: [
{
rows: [
{type:"input",id:"TableWtLimit",label:"Table Weight Limit",labelWidth:120,labelInline:true},
{type:"input",id:"TravelX",label:"X Travel",labelWidth:120,labelInline:true},
{type:"input",id:"Travel4",label:"4th Axis Travel",labelWidth:120,labelInline:true},
{type:"input",id:"SpindleSpeed",label:"Spindle Speed",labelWidth:120,labelInline:true}
]
},
{
rows: [
{type:"input",id:"TableWidth",label:"Table Width",labelWidth:100,labelInline:true},
{type:"input",id:"TravelY",label:"Y Travel",labelWidth:100,labelInline:true},
{type:"input",id:"QuillTravel",label:"Quill Travel",labelWidth:100,labelInline:true},
{type:"input",id:"HP",label:"Spindle HP",labelWidth:100,labelInline:true}
]
},
{
rows: [
{type:"input",id:"TableLength",label:"Table Length",labelWidth:100,labelInline:true},
{type:"input",id:"TravelZ",label:"Z Travel",labelWidth:100,labelInline:true},
{type:"input",id:"MachineWeight",label:"Machine Wt.",labelWidth:100,labelInline:true}
]
}
]
},
{
gravity: false,
title: "Power",
cellCss: "dhx_layout-cell--bordered",
cols: [
{
gravity: false,
rows: [
{type:"input",id:"Panel",label:"Panel",labelWidth:120,labelInline:true},
{type:"input",id:"Phase",label:"Phase",labelWidth:120,labelInline:true}
]
},
{
gravity: false,
rows: [
{type:"input",id:"BreakerNumber",label:"Breaker Num",labelWidth:100,labelInline:true},
{type:"input",id:"Voltage",label:"Voltage",labelWidth:100,labelInline:true}
]
},
{
gravity: false,
rows:[
{type:"input",id:"Amps",label:"Amps",labelWidth:100,labelInline:true},
{type:"input",id:"AmpsStart",label:"Start Amps",labelWidth:100,labelInline:true},
{type:"input",id:"AmpsRun",label:"Run Amps",labelWidth:100,labelInline:true}
]
}
]
},
{
gravity: false,
title: "Control",
cols: [
{type:"input",id:"ControlType",label:"Type",labelWidth:120,labelInline:true},
{type:"input",id:"ControlModelNumber",label:"Model Number",labelWidth:120,labelInline:true},
{type:"input",id:"ControlSerialNumber",label:"Serial Number",labelWidth:120,labelInline:true}
]
},
{
gravity: false,
title: "Tools",
cols: [
{type:"input",id:"ToolType",label:"Tool Type",labelWidth:130,labelInline:true},
{type:"input",id:"MaximumTools",label:"Maximum Tools",labelWidth:130,labelInline:true},
{type:"input",id:"ATC",label:"Tool Changer",labelWidth:130,labelInline:true}
]
},
{
gravity: false,
title: "Other Info",
cellCss: "dhx_layout-cell--bordered",
cols: [
{
gravity: false,
rows: [
{type:"input",id:"MachineType",label:"Machine Type",labelWidth:120,labelInline:true},
{type:"input",id:"ModelNumber",label:"Model Number",labelWidth:120,labelInline:true},
{type:"input",id:"SerialNumber",label:"Serial Number",labelWidth:120,labelInline:true}
]
},
{
gravity: false,
rows: [
{type:"input",id:"DrawBarTension",label:"Draw Bar Tension",labelWidth:130,labelInline:true},
{type:"input",id:"DrawBarTestDate",label:"Draw Bar Test Date",labelWidth:130,labelInline:true}
]
}
]
},
{
gravity: false,
cellCss: "dhx_layout-cell--bordered",
cols: [
{type:"textarea",id:"Notes",label:"Notes",height:200}
]
}
]
});
layoutMachineInfo.cell("form-cell").attach(formMachineInfo);
var toolbarMachineInfo = new dhx.Toolbar();
toolbarMachineInfo.data.parse([
{id:"save",value:"Save",type:"button",color:"success",hidden:true},
{id:"reset",value:"Reset",type:"button",color:"danger",hidden:true},
{id:"login",value:"Log in to Edit",type:"button",color:"primary"}
]);
layoutMachineInfo.cell("toolbar-cell").attach(toolbarMachineInfo);
</script>
</body>