[DISCUSS] Firefox - ellipses for grid cells

[mystix]

in Firefox 2.x / 3.x, grid cells with truncated text do not display ellipses -- all other browsers (i.e. IE6, Safari, Chrome, Opera) do.

this is because FF does not support the CSS3 text-overflow property, and ignores all text-overflow:ellipsis rules in ext-all.css.

there is a working solution for FF 2.x/3.x available (author reports it working for FF2.x, but i only managed to get it to work on FF3.x. YMMV), though it may cause other display issues which may need to be worked out:
http://www.rikkertkoppes.com/thoughts/2008/6/

i suggest a similar workaround be implemented so grid display cross-browser is identical.


[edit]
attaching my css override and required ellipsis-xbl.xml for reference:

css override:


<style>
/*
Workaround for missing ellipsis in grid cells
(due to lack of support for CSS3 "text-overflow" property in Firefox 2.x/3.x)
*/
.ext-gecko .x-grid3-cell-inner{-moz-binding:url('ellipsis-xbl.xml#ellipsis');}
</style>


ellipsis-xbl.xml


<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:window><!-- xul:window tag required for FF2 -->
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>



[edit]
possible drawbacks:

if applied to the grid header, i.e.


.ext-gecko .x-grid3-hd-inner{-moz-binding:url('ellipsis-xbl.xml#ellipsis');}

header context menus will disappear
http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

[Dumbledore]

there is a better version here: http://www.am530.de/2010/06/css-basiertes-text-overflow-in-allen-browsern/

[Condor]

That solution looks really slow. Did somebody do a speedtest on it?

IMHO we should just wait until text-overflow:ellipsis is supported in Firefox (althoug that could take a long time (https://bugzilla.mozilla.org/show_bug.cgi?id=312156)).

[joeri]

Yup, half a decade since I reported that bug, and still no solution in sight.

The problem isn't as simple as it seems. Without a spec, you get broken implementations when dealing with arbitrary content (multi-line, scrolling, bi-di, ...). The other browsers fall down on this stuff also. Opera's ellipsis implementation is so broken (at least when I tested it) that you can only rely on it in the simplest of cases (left-to-right, single-line, no markup). There are a number of test cases attached to that bug that demonstrate the complexities and bugs. IE has the best implementation, but even they have some bugs.

For those reasons I don't recommend making this part of ExtJS itself. I'd rather see it only as an override that people can apply if it makes sense in their situation. I didn't implement it in my grid overrides because there are too many bugs, even on supporting browsers.

I don't blame mozilla for not wanting to implement it until there's a spec, and I also am not surprised the W3C doesn't manage to assign the resources to get this nailed down. I made proposals for what a spec could look like back in the day, but nobody was busy with this part of CSS3, and so it languished.

[Dumbledore]

does someone has a solution for firefox4 ?