Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4708

Grid Column Header - white-space: pre-line doesn't works well for Grid with many columns

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Normal
    • Resolution: Unresolved
    • Affects Version/s: 9.5.0.1
    • Fix Version/s: None
    • Component/s: grid
    • Labels:
      None

      Description

      Steps to Reproduce

      1. Enable text wrapping for grid column header:

      .z-grid-header > table > tbody > tr.z-columns > th.z-column

      {     white-space: pre-line;     text-overflow: ellipsis; }

      2. Set up grid with many columns that will have horizontal scroll. Column header label should have more than 1 word (i.e with white space).

      Current Result

      The column header height will auto increase when you drag the horizontal scrollbar to the right. This is due to the hidden column header's width is being set to 0.001px (inspection from Chrome Dev Tool - <th id="mA2Q4a2" style="width: 0.001px;" class="z-column z-column-sort" role="columnheader"><div id="mA2Q4a2-cave" class="z-column-content"><div class="z-column-sorticon"><i id="mA2Q4a2-sort-icon" aria-hidden="true"></i></div>DB Table Name</div></th>) and this trigger the text wrapping that will increase the height of the column.

      Expected Result

      The column header height doesn't auto increase when scroll to right.

      Debug Information

       

      Workaround

      I've not find a workaround for this.

        Attachments

          Activity

            People

            Assignee:
            Unassigned
            Reporter:
            hengsin hengsin
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated: