Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Addition of numCols to a DynamicForm results in form item titles not being clipped despite having attribute clipItemTitles set to true

    1. SmartClient Version: v12.0p_2018-09-15/Pro Deployment (built 2018-09-15)
    2. Build identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0
    3. N/A
    4. N/A
    5. N/A
    6. Code follows

    Showcase sample Forms.Layout.Titles was used as the basis for the sample code demonstrating the issue.

    Code sample 1 produces screenshot 1 and Code sample 2 produces screenshot 2.
    Code sample 2 differs from Code sample 1 by two lines:
    Code:
    numCols : 3
    title : 'End date whose title is incorrectly NOT clipped'
    The addition of numCols : 3 to Code sample 2 results in the second date item title being no longer clipped.
    Can you confirm that this is a bug. And if so, in what version will that fix be included?

    CODE SAMPLE 1
    Code:
    isc.DynamicForm.create({
        ID: "exampleForm",
        titleOrientation : 'top',
        clipItemTitles : true,
        colWidths : [150, 150, 300],
        cellPadding : 5,
        width : 600,
        fields :
        [
            {
                name : 'metadata',
                title : 'Metadata',
                required : true,
                height : 300,
                width : 600,
                colSpan : 3
            },
            {
                name : 'startDate',
                editorType : 'DateItem',
                useTextField : true,
                showTitle : true,
                required : true,
                title : 'Start date whose title is correctly clipped'
            },
            {
                name : 'endDate',
                editorType : 'DateItem',
                useTextField : true,
                showTitle : true,
                required : true,
                title : 'End date whose title is correctly clipped'
            }
        ]
    });
    
    isc.Button.create({
        ID: "swapButton",
        height: 36, margin: 2,
        title: "Swap titles",
        click: function () {
            exampleForm.setTitleOrientation(exampleForm.titleOrientation == "top" ? "left" : "top");
        }
    });
    
    isc.HLayout.create({
        members:[exampleForm, swapButton]
    });
    SCREENSHOT 1

    Click image for larger version  Name:	TitlesAreClipped.png Views:	5 Size:	17.1 KB ID:	255213
    CODE SAMPLE 2
    Code:
    isc.DynamicForm.create({
        ID: "exampleForm",
        titleOrientation : 'top',
        clipItemTitles : true,
        colWidths : [150, 150, 300],
    [B]numCols : 3[/B],
        cellPadding : 5,
        width : 600,
        fields :
        [
            {
                name : 'metadata',
                title : 'Metadata',
                required : true,
                height : 300,
                width : 600,
                colSpan : 3
            },
            {
                name : 'startDate',
                editorType : 'DateItem',
                useTextField : true,
                showTitle : true,
                required : true,
                title : 'Start date whose title is correctly clipped'
            },
            {
                name : 'endDate',
                editorType : 'DateItem',
                useTextField : true,
                showTitle : true,
                required : true,
                title : 'End date whose title is incorrectly NOT clipped'
            }
        ]
    });
    
    isc.Button.create({
        ID: "swapButton",
        height: 36, margin: 2,
        title: "Swap titles",
        click: function () {
            exampleForm.setTitleOrientation(exampleForm.titleOrientation == "top" ? "left" : "top");
        }
    });
    
    isc.HLayout.create({
        members:[exampleForm, swapButton]
    });
    SCREENSHOT 2
    Click image for larger version  Name:	TitlesAreNOTClipped.png Views:	1 Size:	19.6 KB ID:	255214
    Last edited by Vivek_Gungabissoon; 24 Sep 2018, 11:39. Reason: Typo correction in title

    #2
    Not a bug. Before adding numCols you have a colWidths array that doesn’t match the default number of columns (2). For more information, read the Form Layout overview. Also pay attention to the Developer Console, this error is reported to you by the framework.

    Comment


      #3
      Code sample 2 is reproduced with the addition of explicit widths (150) to the two date items.
      The colWidths match the numCols. Further the colWidths array sum match the specified Form.width as DynamicForm.colWidths documentation says that
      DynamicForm.colWidths [IRW]
      An array of widths for the columns of items in this form's layout grid.
      If specified, these widths should sum to the total width of the form (form.width).
      There are no errors/warnings/info in the developper console.

      I need to clip the end date title and I expected clipItemTitles set to true to do it but it doesn't.
      How do I achieve this title clipping?

      Code:
      isc.DynamicForm.create({
          ID: "exampleForm",
          titleOrientation : 'top',
          clipItemTitles : true,
          colWidths : [150, 150, 300],
          numCols : 3,
          cellPadding : 5,
          width : 600,
          fields :
          [
              {
                  name : 'metadata',
                  title : 'Metadata',
                  required : true,
                  height : 300,
                  width : 600,
                  colSpan : 3
              },
              {
                  name : 'startDate',
                  editorType : 'DateItem',
                  useTextField : true,
                  showTitle : true,
                  required : true,
                  width : 150,
                  title : 'Start date whose title is correctly clipped'
              },
              {
                  name : 'endDate',
                  editorType : 'DateItem',
                  useTextField : true,
                  showTitle : true,
                  required : true,
                  width : 150,
                  title : 'End date whose title is incorrectly NOT clipped'
              }
          ]
      });
      
      isc.Button.create({
          ID: "swapButton",
          height: 36, margin: 2,
          title: "Swap titles",
          click: function () {
              exampleForm.setTitleOrientation(exampleForm.titleOrientation == "top" ? "left" : "top");
          }
      });
      
      isc.HLayout.create({
          members:[exampleForm, swapButton]
      });
      Click image for larger version  Name:	NotClipped.png Views:	2 Size:	18.8 KB ID:	255246

      Comment


        #4
        Again you'll need to read the docs for FormLayout, and also play close attention to the docs for titleOrientation. When you flip titles to the top, items and their titles are no longer in separate columns. Your FormItems thus only occupy two columns, whereas you have configured for 3. The unused space gets added to the last column, so there's no need to clip the title.

        Setting numCols to 2, which accurately reflects how many columns you are actually using, corrects the issue. Note that numCols is allowed to be changed on the fly (note the "W" in it's documented flags). if you actually intend to flip title orientation on the fly for some reason.
        Last edited by Isomorphic; 1 Oct 2018, 02:32.

        Comment

        Working...
        X