Thank you that accurate explanation.
What we require is exactly what you described as 'Fit-to-height wrapping' in the minimal form (so without support for maxWidth).
I will contact support about possible sponsorship for that feature.
Announcement
Collapse
No announcement yet.
X
-
You've described two behaviors in this thread:- Having text in a button wrap, showing an ellipsis only on the bottom line if it gets truncated there. Let's call this "multi-line ellipsis."
- Having text in an autofit-enabled button wrap in such a way that minimizes the button's width by using as many available text lines in the button as possible, without truncating any text. Let's call this "Fit-to-height wrapping."
"Multi-line ellipsis" would require some once-per-font measurement be run to allow use to write it using existing CSS attributes, but "Fit-to-height wrapping" would, in addition, require that we render the button text off screen for every (re)draw, perhaps multiple times for variable-width fonts. So it would be complex and could have a significant performance impact.
Leave a comment:
-
Hi Isomorphic,
Continuing on this thread, I'd like to actually amend the question a bit.
What we are actually trying to achieve is that with the following combination of properties, the wrapping will take place to the extent that the column height can fit, and that the column width will be auto-set accordingly.
Code:wrapHeaderTitles: true, autoFitFieldWidths: true, autoFitHeaderHeights: false, // we don't want to auto-fit header height! autoFitWidthApproach: "both" // could also be "title" for that matter
Three Word
Title
Three
Word
Title
This way the whole title text is always visible in full without auto-fitting the header height.
I realize this is probably not supported - just wanted to get your opinion before we get into the Feature Sponsorship option.
Would that even be feasible?
Thanks
Leave a comment:
-
The autoFitWidthApproach: "both" is working as intended in this case (using our sample above as a reference). since you have wrapping enabled. When wrapping, the column will size to fit the wrapped content, which for titles means the longest word. That's mentioned in the docs for ListGrid.autoFitFieldWidths.
If having a hover display the truncated title isn't enough, then as we pointed out above, you can set autoFitHeaderHeights:true to cause the header bar to expand vertically to show all content (or set a manual height yourself).
Browsers are moving towards a point where multi-line truncation can be accomplished in CSS, but it will likely be some time before we add support to our Framework. If you're interested in Feature Sponsorship, please contact support to have a discussion about what exactly we can provide.
Leave a comment:
-
Yes, I'm asking about multi-line ellipsis. I accidentally attached a screenshot that doesn't show the problem. I understand that you don't support this. How can I handle this issue on my own?
I mean: where is the code that determines the appropriate width of the column, using autoFitWidthApproach = both?
here is the correct screenshot that shows the clipped multi-line title, without showing the ellipsis:
Leave a comment:
-
If what you're asking for is multi-line ellipsis, the Framework doesn't currently support it as it's historically not been possible cross-browser. However, we'd first like to ask for clarification about your diagram. The red arrow is pointing at a field that isn't clipped. Your image shows the full title for the second field as, "This is a long title test." Did you mean to draw the arrow pointing at the first field, "Code"?
We can easily prevent "Code" from being truncated by changing the ListGrid.autoFitWidthApproach to "both" from the default of "value". We're not seeing the second field's title clipped with your sample code, but if you assigned a narrow width to the field, rather than autofitting it, that would definitely happen.
The Framework should automatically show a hover when a title is clipped, so that's one mitigation. Another potential solution is to set ListGrid.autoFitHeaderHeights, which will cause the header to expand vertically to accommodate your title.
In this sample:Code:isc.ListGrid.create({ ID: "countryList", width:280, height:224, alternateRecordStyles:true, fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"This is a long title test", maxWidth:80}, {name:"capital", title:"Capital"} ], data: countryData, wrapHeaderTitles: true, autoFitFieldWidths: true, //autoFitHeaderHeights:true, autoFitWidthApproach:"both" })
Leave a comment:
-
Listgrid - auto-fit & title wrapping issue
Hi, I have a list grid with `wrapHeaderTitles` and `autoFitFieldWidths` set to "true".
When the grid is drawn, some of the headers' titles are clipped, without showing the ellipsis.
Here is a code snippet I used with "Local Data" example on SmartClient Feature Explorer website to demonstrate this issue:
isc.ListGrid.create({
ID: "countryList",
width:280, height:224, alternateRecordStyles:true,
fields:[
{name:"countryCode", title:"Code"},
{name:"countryName", title:"This is a long title test"},
{name:"capital", title:"Capital"}
],
data: countryData,
wrapHeaderTitles: true,
autoFitFieldWidths: true
})
What I really trying to achieve is to wrap the titles only for 2 rows..
and if there are more rows - the title should be clipped and the ellipsis should be displayed.
I would love to have some guidance on the subjectTags: None
Leave a comment: