Studio-generated fields are misaligned compared to manually configured ones

Test Environment: Mac fresh install of Nuxeo (nuxeo-cap-5.7-I20130603_0116-tomcat), Chrome Mac
Note: This is the test environment, the problem seems to exist for any OS server and any browser.

Creating a new document (here, a "File"): Browser displays something ok (left aligned

in Studio, starts with an empty project (means no DM template nor DAM template, nothing). Create a new document type, which inherits from "Document". Nothing else added or modified (no schema, not even open the Creation/View/... layouts)

Update server with this Studio project, create a new document of this new type => the form looks badly, things are displayed on the right

The "Summary" tab is ok, but "Edit" has the bad looking problem:
03-CustomDoc-Edit.png/

Now we create a new Form Layout. Name it, for example, "MyCustomTyopeLayout". but let all the default stuff (no need to change anything).
Then, create a new Tab:

• Enablement: for MyCustomType document type
• Definition: 2 columns.
  • Toggleable form (using the Layout) + Dublincore on the let
  • States, Workflow Process, Tagging on the right

Run:

• The tab shows the Toogleable form is missaligned:
  

• It's even worse when we "Edit" it:
  

It looks like the problem comes from a colspan definition that uses 2 as default value. If we reset the colspan to 1, things are back to normal:

Workaround implemented:

1. Use the "my_form_layout_template.xhtml"
2. Renamed it something ("fix_colspan_problem.xhtml")
3. Add some JavaScript. here, after the tooltip enablement:

   <script>
     jQuery(document).ready(function() {
       jQuery(".widgetHelpLabel").tooltip({relative: true, position: 'bottom center'});
       
       var TDs;
       
       // Creation form
       TDs = jQuery("#document_create .studioFormTable .labelColumn");
       if(TDs &amp;&amp; TDs["length"]) {
           TDs.attr("colspan", 1);
       }
       
       // Edition form
       TDs = jQuery("#document_edit .studioFormTable .labelColumn");
       if(TDs &amp;&amp; TDs["length"]) {
           TDs.attr("colspan", 1);
       }
       
       // Summary
       TDs = jQuery(".tabsContent .summary .dataTableNoBorder .fieldColumnn .studioFormTable .labelColumn");
       if(TDs &amp;&amp; TDs["length"]) {
           TDs.attr("colspan", 1);
       }
     });
   </script>
   

I did limit the JS to handled only the specific part of the "CaseManagement" demo application. I don't want to set the colspan to 1 for every "labelColumn" class, don't know it will break something.

This problem has been tagged "Major" because it gives a bad out of the box impression for prospects we have. Ther is a workarounbd for us in presales (see below), but it's not easy to explain/apply (need a template for every layout that has the problem, may need to adapt the javascript that fixes it because it is very specific to avoid side-effect as much as possible, etc.)