Form items alignment issue in Safari and Chrome.

[subashk]

SmartClient Version : Version v9.0
Browser : Safari(5.1.7)/Chrome

We are seeing an alignment issue of form items in Safari and Chrome browsers The same code has no issues in IE.

We have the following DynamicForm which renders fine in IE but in chrome and safari the fields 4 and 6 are pushed to the right.

Can you please suggest us if we are missing something specific to these browsers which are causing the alignment issue.

isc.DynamicForm.create({                
             padding:6,
            numCols:4,
            requiredTitleSuffix: " : ",                  
            wrapItemTitles: false,            
            width: 200,
            fields: [
           {name:"field1", colSpan: 3, title:"Field1", disabled:this.isReadOnly, width:190},
           {
             name:"field2",
             colSpan: 3,
             title:"Field2",
             width:190, 
             disabled: this.isReadOnly
           },
           {
            name:"field3",                 
                 title:"Field3",
                 disabled:this.isReadOnly,
                 width: 50
           },                
           {
            name: "field4",                 
                 title: "Field4", 
                 disabled:this.isReadOnly,
                 width: 100,
                 editorType:"comboBox",                  
           pickListWidth:'100'

              },
    {
     name: 'field5',
     width: 190,
     title: 'Field5',
     colSpan: 3,
     visible: !this.isReadOnly
     
    },
    {
     type: "spacer",
     colSpan: 4,
     visible: this.isReadOnly
    },
    {
     type: "spacer",
     rowSpan: 1,
     colSpan: 4,
     visible: this.isReadOnly
    },
    {
     name: 'field6',
     align: 'right',
     width: 193,
     height: 50,
     showTitle: false,
     type: 'textArea',
     canEdit: true,
     disabled: true,
     colSpan: 4,
     visible: !this.isReadOnly
    }
            ]
  });

[subashk]

Any suggestions please ?

[Isomorphic]

This is assigned to a developer to take a look. We'll follow up when we have information for you.

Regards
Isomorphic Software

[Isomorphic]

The fundamental reason for this is that you've got a specified width for the form as a whole (200), which isn't wide enough to accomodate the content. By default title-columns are rendered 100px wide (adjustable via form.titleWidth) and element columns will divvy up the remaining space between them.
You've got explicit sizes on your items which will cause items' elements to render wider than these column-widths and the resulting layout becomes slightly unpredictable.

The best way to get the behavior you want is to specify explicit column widths using the colWidths flag.
Here's a reworked version of your example which does this as well as using the special "*" width to cause items to fill their columns without exceeding them (and produces the same layout on all browsers):

isc.DynamicForm.create({                
            padding:6,
            numCols:4,
            requiredTitleSuffix: " : ",                  
            wrapItemTitles: false,            
            colWidths:[50,50,50,100],
            width: 250,
            fields: [
           {name:"field1", colSpan: 3, title:"Field1", disabled:this.isReadOnly, width:"*"},
           {
             name:"field2",
             colSpan: 3,
             title:"Field2",
             width:"*", 
             disabled: this.isReadOnly
           },
           {
            name:"field3",                 
                 title:"Field3",
                 disabled:this.isReadOnly,
                 width: 50
           },                
           {
            name: "field4",                 
                 title: "Field4", 
                 disabled:this.isReadOnly,
                 width: 100,
                 editorType:"comboBox",                  
           pickListWidth:'100'

              },
    {
     name: 'field5',
     width: "*",
     title: 'Field5',
     colSpan: 3,
     visible: !this.isReadOnly
     
    },
    // the next two SpacerItem are not visible
    {
     type: "spacer",
     colSpan: 4,
     visible: this.isReadOnly
    },
    {
     type: "spacer",
     rowSpan: 1,
     colSpan: 4,
     visible: this.isReadOnly
    },
    // New spacer item to fill the "title" cell (first column)
    {type:"SpacerItem"},
    {
     name: 'field6',
     axlign: 'right',
     width: "*",
     height: 50,
     showTitle:false,
     type: 'textArea',
     canEdit: true,
     disabled: true,
     colSpan: 3,
     visible: !this.isReadOnly
    }
            ]
  });

[subashk]

Thank you for the reply. We tried your suggestions and the form items are aligned perfectly in all the browsers.