6.1d ListGrid Wrapped Titles jump on hovering

[Blama]

Hi Isomorphic,

please see this sample and change to code to:

isc.ListGrid.create({
    ID: "countryList",
    height:224, width:380, alternateRecordStyles:true,
    autoFitWidthApproach:"both",
    wrapHeaderTitles:true,
    headerHeight:40,
    headerAutoFitEvent:"doubleClick",
    leaveHeaderMenuButtonSpace:true,
    sortField: "countryName",
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag Thumbnail", cellAlign:"center",
         type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country of Origin", width:80},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ]
})

As you can see the column title moves on hovering. Tested online with SNAPSHOT_v11.1d_2017-03-24 and GC57.

Asides from this I really like the feature. It's going to make my application better to understand.

Best regards
Blama

[Isomorphic]

We've made a fix to address this in SGWT 6.1d/SC 11.1d which should be in the current nightly builds.

Due to the space now permanently occupied by the padding, you will probably want to modify your code to avoid any horizontal or vertical clipping - clipping may vary by browser. Simply bumping the width of "countryName" field to 90 should avoid any clipping. Alternatively, you could keep the width as 80 and replace "headerHeight:40" with "autoFitHeaderHeights:true", which would eliminate the vertical clipping of "Origin" but the end of "Country" may still be clipped.

[Blama]

Hi Isomorphic,

thanks for the change. I don't remember the old way it was before, but in general I think the new behavior looks good. There are some issues still, though. Now testing in the online sample from above with GC59 and SNAPSHOT_v11.1d_2017-06-18.

1) See the result with autoFitHeaderHeights:true


2) With the original code from #1 there is a small (minor) position bump in the country-title when "Origin" appears/disappears.
(Note: Also happens for "Country of oriin", so it is not related to the capital "O" or the lower part of the "g")


The best solution would be to have ellipsis as well in the testcase from #1, as manually tuned field width are not possible with i18n titles.
Second best solution IMHO is autoFitHeaderHeights:true with the first bug from this post fixed.


Best regards
Blama

[Isomorphic]

We've committed a fix to address the first issue you mentioned (top animation) in SGWT 6.1/SC 11.1. It will be in the nightly builds dated 2017-06-27 and beyond.

[Blama]

Hi Isomorphic,

I can see that the testcase from #1 is working as expected in 11.1p (now on v11.1p_2017-07-05), thanks a lot.

Could you note the other things as minor bugs / enhancements?

• issue 2) from post#3
• Ellipsis if text is missing with autoFitHeaderHeights:false or at least a hover for those column headers

Best regards
Blama

[Isomorphic]

We're not sure what you mean with the remaining issues. There is no space for the word "Origin" given the space need for the sort indicator. If you end the resize with "Origin" not shown, the header height adjusts to show it, so nothing is clipped; no need for an ellipsis.

We don't think it makes sense to show an ellipsis *during the resize* (or a hover either). It is true that with showClippedHeaderTitlesOnHover:true, currently we don't show a hover for vertically clipped headers (when autoFitHeaderHeights is true), so we'll look at enhancing that.

[Blama]

Hi Isomorphic,

perhaps I'm not clear. The issue where the text changes its (vertical) position when you resize the column is still present. See the 2nd video in #3. You can reproduce with the code from #1. But this is very minor.

Another test case would be the sample's original code with canSort:true, then resizing the column. This time the text is moving down (as compared to the video in #3, where it is moving up):





About the ellesis: I'm taking about an ellepsis end of resize, not during resize. With the normal sample code you can create this picture by just making the column smaller:


I was suggesting "..." after the word "of". But this is also minor.

IMHO a hover would be enough in this case (wrapHeaderTitles:true, autoFitHeaderHeights: false). I assume it would be more easy than an ellepsis. But this is minor as well.


Best regards
Blama

[Isomorphic]

The text moves down in the first instance because the first word is no longer small enough to fit given the space allocated to the sort indicator. If it stayed where it was, a tall last letter (eg "l") would overlap the sort indicator, or at least look uncomfortably close. The space left for the sort indicator is configurable if you are comfortable with this overlap.

Thanks for clarifying that you are looking for an ellipsis or hover in the case that autoFitHeaderHeights is false - this is the area that we just mentioned we'd be looking at enhancing.

[michalg]

or hover in the case that autoFitHeaderHeights is false - this is the area that we just mentioned we'd be looking at enhancing.

Even though autoFitHeaderHeights is explicity set to true I would like the hover, like in this example over Country column title:


Thanks,
MichalG

[Blama]

Hi Isomorphic,

using the sample from #1 (now: v11.1p_2017-08-17) with the code from #1, you can see that "Country of origin" always displays a hover, even if wide enough.
This is not true for the other columns.

Best regards
Blama

[Isomorphic]

Hi Isomorphic,

using the sample from #1 (now: v11.1p_2017-08-17) with the code from #1, you can see that "Country of origin" always displays a hover, even if wide enough.
This is not true for the other columns.

Best regards
Blama

What browser?

[Blama]

Hi Isomorphic,

it's happening in FF26, Chromium 59 under Win8 and Chromium 60/Win10. IE11/Win8 is working as expected.
Please note that you have to modify the sample like in #1.

Best regards
Blama

[Isomorphic]

Yes, this is consistent with a problem we've just fixed in SGWT 11.1p/SC 6.1p and newer branches. The fix should be in the nightly builds dated 2017-08-20 and beyond.

[Blama]

Hi Isomorphic,

this is fixed for me using v11.1p_2017-08-20. IE Edge 14.14393/GC60/FF26 under Win10 all behave the same, that is, only display the hover when it is needed.

Best regards
Blama

[Blama]

Hi Isomorphic,

I switched to

Application start:
Canvas.resizeFonts(2);
Canvas.resizeControls(8);

...
lg.setShowClippedValuesOnHover(true);
lg.setHeaderHeight(37);
lg.setWrapHeaderTitles(true);
ListGrid.setDefaultProperties(lg);

so that now all headers are exactly two rows high in my font. This is working fine. Small issue: When the field has a title taking three rows (happens often for narrow fields), there is no ellipsis shown.
Normally this would not matter because of the hover that shows the full field title, but sometimes the hover is not displayed. I did not find out why, yet, and also could not reproduce in BuiltInDS (using latest 6.1p and Tahoe).

Do you have an idea what might be causing this? In #8 you mentioned that you are doing enhancements in this area. Did those already land? Any other idea that might help?

In my application, if I change the width of the affected field just a little bit, the hover is shown again.

Thank you & Best regards
Blama