Uploaded image for project: 'Nuxeo Platform'
  1. Nuxeo Platform
  2. NXP-11234 Review CSS for forms
  3. NXP-11826

Studio-generated fields are misaligned compared to manually configured ones

    XMLWordPrintable

    Details

    • Type: Sub-task
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 5.7.2
    • Component/s: Ergonomy & UX
    • Tags:
    • Backlog priority:
      500

      Description

      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.)

        Attachments

        1. targuillere-SANDBOX.jar
          193 kB
        2. 06-FiwWithColspan.png
          06-FiwWithColspan.png
          126 kB
        3. 05-CustomDoc-Edit-in-Toggable-Form.png
          05-CustomDoc-Edit-in-Toggable-Form.png
          44 kB
        4. 04-CustomDocInTab.png
          04-CustomDocInTab.png
          56 kB
        5. 03-CustomDoc-Edit.png
          03-CustomDoc-Edit.png
          34 kB
        6. 02-CreateNewCustomDoc.png
          02-CreateNewCustomDoc.png
          26 kB
        7. 01-CreateNewFile-RawNuxeo.png
          01-CreateNewFile-RawNuxeo.png
          25 kB

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: