Column Spacing/Widths not working as expected for Inserted Columns

Issue #651 open
Sanketh Suresh created an issue

Attaching a screen shot for the same.

We have insterted additional columns on Dashboard to provide spacing between two blocks of the report and tried spacing the inserted columns with 20 as col width, but we are seeing inconsistent behaviour on the final page.

Also attaching the setting code snippet


"table": {
    "rowFormat": {
      "": [
        {
          "attribute": "APQ Format"
        }
      ]
    },
    "columnFormat": {
      "": [
        {
          "attribute": "APQ Format"
        }
      ],
      "Variance $": [
        {
          "numberFormat": "#,##0,,;-#,##0,,; "
        }
      ],
      "% of Total": [
        {
          "numberFormat": "#.0%;-#.0%; "
        }
      ],
      "Variance %": [
        {
          "numberFormat": "#.0%;-#.0%; "
        }
      ],
      "Per Unit": [
        {
          "numberFormat": "#,##0.00;(#,##0.00); "
        }
      ],
      "Variance % of Total / Gross Margin": [
        {
          "numberFormat": "#,##0;-#,##0; "
        }
      ],
      "Var Per Unit": [
        {
          "numberFormat": "#,##0.00;(#,##0.00); "
        }
      ]
    },
    "colWidths": [
      368,
      137,
      91,
      91,
      91,
      91,
      91,
      91,
      20,
      91,
      91,
      139,
      91,
      91,
      20,
      91,
      91,
      91,
      91,
      91,
      91,
      20,
      91,
      91,
      152,
      93,
      93,
      33,
      91,
      91,
      139,
      91,
      91,
      34,
      91,
      91,
      91,
      91,
      91,
      91,
      31,
      91,
      91,
      139,
      91,
      91
    ],
    "hiddenColumns": [],
    "hiddenRows": [],
    "tableFilters": {
      "conditionsStack": []
    },
    "insertedRowsAndColumns": {
      "columnDataIndex": 10,
      "rowDataIndex": 8,
      "columnData": [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        []
      ],
      "rowData": [
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ],
        [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          ""
        ]
      ]
    },
    "columnsMap": [
      0,
      1,
      2,
      3,
      4,
      5,
      {
        "empty": true,
        "name": "",
        "groupNames": [
          ""
        ],
        "colData": 1,
        "numberFormat": "#,###;(#,###);0;-",
        "class": "noborder whiteBack",
        "priority": 10,
        "ibcsClass": "",
        "numberOfAdditionalRows": 0,
        "appliedNumberFormat": "#,###;(#,###);0;-"
      },
      6,
      7,
      8,
      9,
      10,
      {
        "empty": true,
        "name": "",
        "groupNames": [
          "",
          ""
        ],
        "colData": 2,
        "numberFormat": "#,###;(#,###);0;-",
        "class": "noborder whiteBack",
        "priority": 10,
        "ibcsClass": "",
        "numberOfAdditionalRows": 0,
        "appliedNumberFormat": "#,###;(#,###);0;-"
      },
      11,
      12,
      13,
      14,
      15,
      16,
      {
        "empty": true,
        "name": "",
        "groupNames": [
          "",
          ""
        ],
        "colData": 3,
        "numberFormat": "#,###;(#,###);0;-",
        "class": "noborder whiteBack",
        "priority": 10,
        "ibcsClass": "",
        "numberOfAdditionalRows": 0,
        "appliedNumberFormat": "#,###;(#,###);0;-"
      },
      17,
      18,
      19,
      20,
      21,
      {
        "empty": true,
        "name": "",
        "groupNames": [
          "",
          ""
        ],
        "colData": 4,
        "numberFormat": "#,###;(#,###);0;-",
        "class": "noborder whiteBack",
        "priority": 10,
        "ibcsClass": "",
        "numberOfAdditionalRows": 0,
        "appliedNumberFormat": "#,###;(#,###);0;-"
      },
      22,
      23,
      24,
      25,
      26,
      {
        "empty": true,
        "name": "",
        "groupNames": [
          "",
          ""
        ],
        "colData": 7,
        "numberFormat": "#,###;(#,###);0;-",
        "class": "noborder whiteBack",
        "priority": 10,
        "ibcsClass": "",
        "numberOfAdditionalRows": 0,
        "appliedNumberFormat": "#,###;(#,###);0;-"
      },
      27,
      28,
      29,
      30,
      31,
      32,
      {
        "empty": true,
        "name": "",
        "groupNames": [
          "",
          ""
        ],
        "colData": 9,
        "numberFormat": "#,###;(#,###);0;-",
        "class": "noborder whiteBack",
        "priority": 10,
        "ibcsClass": "",
        "numberOfAdditionalRows": 0,
        "appliedNumberFormat": "#,###;(#,###);0;-"
      },
      33,
      34,
      35,
      36,
      37
    ],
    "rowsMap": [
      0,
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
      13,
      14,
      15,
      16,
      17,
      18,
      19,
      20,
      21,
      22,
      23,
      24,
      25,
      26,
      27,
      28,
      29,
      30,
      31,
      32,
      33,
      34,
      35,
      36,
      37,
      38,
      39,
      40,
      41,
      42,
      43,
      44,
      45,
      46,
      47,
      48,
      49,
      50,
      51,
      52,
      53,
      54,
      55,
      56,
      57
    ]
  },
  "wizard": {
    "hideBackButton": true,
    "hideNextButton": true
  },
  "toolbar": {
    "collapseButtonEnabled": true,
    "searchEnabled": true,
    "rowFiltersEnabled": true,
    "columnButtonEnabled": true,
    "columnFiltersEnabled": true,
    "modalButtonsEnabled": true,
    "processButtonEnabled": true,
    "refreshButtonEnabled": true,
    "batchPrintButtonEnabled": true,
    "exportButtonEnabled": true,
    "exportPDFButtonEnabled": true,
    "exportExcelWithFiltersButtonEnabled": true,
    "exportExcelButtonEnabled": true,
    "exportExcelPlainButtonEnabled": false,
    "exportPDFServlet": "print-v2.pdf",
    "columnFilterButtonEnabled": true
  }
}

Comments (8)

  1. Sanketh Suresh reporter

    Any updates on this ticket, at this point this is a deal breaker for our Go live next week on May 31st.

  2. Ada Trajer
    • changed status to open

    Hi Sanketh, I was looking into this issue and so far I was not able to replicate it. Can you tell me if this table is using any custom css classes / format? If yes could you try this on a table without it and see if there is still issue with the column width? It would help to track this issue down.

  3. Cindy

    Hi Ada, I’m the creator of the report Sanketh is referring to. I believe the issue is related to the fact that this report includes three subviews glued together. When I remove the additional subviews I do not experience this problem. Are you able to replicate the issue if you add additional subviews to your report?

  4. tomer ganz

    Hi Cindy,

    thanks for your reply,

    we were not able to replicate even with multiple sub-views,

    we believe the root cause for this is you have custom CSS class on the column headers to wrap the text,

    can you try creating the same view without it and see if the issue still exist?

  5. Cindy

    Hi Tomer,

    I still see the issue even when I don’t apply custom CSS classes. Upon further investigation, I think this is a Colspan issue with inserted columns that break what would normally be a merged header. I’ve tried to replicate this issue on a very simple report and have been successful. See second screenshot below with Colspan turned on, and the third inserted column not formatting correctly (too wide). See first screenshot below with Colspan turned off, and the third inserted column formatting correctly (narrow as expected).

    I believe this is only a problem after the first inserted column that breaks a merged header. Are you able to create a report like this on your side and replicate this issue?

    Thanks,

    Cindy

  6. tomer ganz

    Hi Cindy,

    we were finally able to replicate this issue,

    and unfortunately the issue comes directly from the 3rd party library we use.

    It has been fixed on their latest version and we are now in the process of upgrading to the latest one.

    a fix for this will be included in the next release

    Best,

    Tomer

  7. Log in to comment