Rendering Issue in Edge with Tabbar + Layout + Form


#1

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>

Two CSS issues in Suite 6.4.4
#2

In my project I had the same problem with Form inside Tabbar tab (in Firefox). It is related to this CSS definition in Suite 6.4.3 (little bit different in 6.4.4):

.dhx_tabbar--top .dhx_layout-cell {
 height:100%;
 overflow:auto;
 flex:1 1 auto
}

Each field of Form is enclosed in a separate Cell of Layout, and due to the flexible nature of Cell, they are compressed or stretched.

My workaround:

<style>
    .dhx_tabbar .my_form .dhx_layout-cell{
    overflow: visible;
    height: auto;
}
</style>

And then in Form definition:

var formMachineInfo = new dhx.Form(null, {
  gravity: false,
  css: 'my_form',
  rows:   [ ... ]
});

It’s work for me in 6.4.3 and 6.4.4 Suite versions.


#3

@proldapru That fixed my issue as well! Thank you!

I tested changing the height property of that style definition in suite.min.css (version 6.4.4) to “auto” instead of “100%”:

.dhx_tabbar--top .dhx_layout-cell{height:auto;overflow:hidden;flex:1 1 auto}

and the form rendered correctly on page load. I don’t know what else that might impact across the whole suite, but hopefully the dev team can determine if that’s a valuable change to make.