Announcement

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

    6.1p Tahoe ListGrid header clipped

    Hi,
    There is showcase sample http://www.smartclient.com/smartclie...sizeIncrease=0
    It uses headerHeight:40 hardcoded in pixels, which makes header height insensible for changing density (whatever density user chooses, header is always 40px). So this is basically wrong.
    Commenting out the line:
    // headerHeight:40
    improves this example in that way it observes density and calculates headerHeight accordingly.
    It works fine in most browsers, but unfortunately on firefox 54.0.1 (32 bit) on Windows 8 cuts bottom of letters when density Dense is chosen: Click image for larger version

Name:	headerHeight.jpg
Views:	59
Size:	36.9 KB
ID:	247882

    Both on Chrome and IE (and even of FF on linux) it looks much better.
    Thanks,
    MichalG
    Last edited by michalg; 26 Jul 2017, 08:18. Reason: correct density to test: Dense

    #2
    This sample demonstrates *horizontal* auto-fitting to a wrapped title. The headerHeight is chosen just to ensure that a developer viewing the sample can definitely see that the title is wrapped (in any Density).

    There is a separate autoFitHeaderHeights which ensures that the header automatically fits to the height of header titles (including wrapped header titles), regardless of Density and platform.

    Comment


      #3
      Thank you for the explanation.
      Yes, I am aware of ListGrid.autoFitHeaderHeights. What I am trying to achieve is two lines of header clearly visible and not clipped (with any density). If a header text is going to be split into three or more lines, then I would like third (and following) line to be trimmed (not visible), but the whole header available as hover (like when header text is horizontally trimmed).
      It is almost done with leaving headerHeight unset - just clipped a little on some browser/os combinations.
      The background is that our users like the idea of multi line header, but using autoFitHeaderHeights is consumes too much vertical space at the expense of grid's data area, so two lines is a kind of compromise.
      MichalG

      Comment


        #4
        We don't currently have a feature that auto-sizes to a particular number of lines of titles, while clipping the rest. If you want that behavior, you could do some offscreen rendering at app startup to measure the height of two lines of text (styled as ListGrid headers are styled, at the current Density setting) and then use that height for your grid.headerHeight.

        Or you could use Feature Sponsorship to have this added as a feature, where we would take basically the same approach.

        Comment


          #5
          Thanks for the idea.
          If anyone meets those kind of requirements here is excerpt of what I used:
          Code:
          public class LG extends ListGrid {
          
              private static int headerHeightRows = 0;
           
              public LG() {
          
                  if (headerHeightRows == 0) {
                      headerHeightRows = getHeaderHeightRows(2);
                  }
          
                  //defaults to show clipped titles and values
                  this.setShowClippedHeaderTitlesOnHover(true);
                  this.setShowClippedValuesOnHover(true);
                  //defaults to wrap titles
                  this.setWrapHeaderTitles(true);
                  //this.setAutoFitHeaderHeights(true);
                  this.setHeaderHeight(headerHeightRows);//default 22 too little (FF on Win)
              }
          
              /**
               * Calculate the height of header to accommodate desired number of rows.
               *
               * [USER="45788"]param[/USER] rows
               */
              private static int getHeaderHeightRows(int rows) {
                  int headerHeight = 0;
                  String testTitle = "";
                  for (int i = 0; i < rows; i++) {
                      testTitle = testTitle + i + " ";
                  }
                  Button testHeader = new Button();
                  testHeader.setWidth(20);
                  testHeader.setWrap(true);
                  testHeader.setOverflow(Overflow.VISIBLE);
                  testHeader.setStyleName("headerButton");
                  testHeader.setTitle(testTitle);
                  testHeader.draw();
                  headerHeight = testHeader.getVisibleHeight();
                  testHeader.destroy();
                  return headerHeight;
              }
          }
          MichalG

          Comment

          Working...
          X