PDA

View Full Version : How to abbreviate a string as the width of a column grid?



elloa
19 Apr 2011, 8:57 AM
Hi all.

In my project, I have a grid and its columns has no fixed size and I can resize the columns. In each column I have a div that contains a string result.

I would like to abbreviate the string as the column width. How can I do this?

Thanks.

tankhou
20 Apr 2011, 5:26 PM
To google and type "way to abbreviate atring",that i ok.
runescape gold (https://www.gametradeeasy.com/runescape/gold/runescape_en.html)

cyChop
21 Apr 2011, 4:45 AM
If by "abbreviate", you mean adding a "..." when the String is longer than the cell in the grid, it is automatic: GXT uses the text-overflow: ellipsis CSS attribute.

But still, it doesn't work in all browsers: Firefox doesn't support it (at least in 3.6 version).

But you can emulate it. Here is what I did to make it work:
created an ellipsis.xml file with this content:

<?xml version="1.0" encoding="UTF-8"?>
<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:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>

and added this in my custom CSS:

/* workaround for ellipsis in FF */
.x-tab-strip-inner,
.x-grid3-cell-inner,
.x-grid3-hd-inner,
.x-combo-list-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}

Hope this helps.

Edit: a reference about ellipsis hacks to make it work in all so-called 'modern' browsers:
http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

elloa
3 May 2011, 3:36 AM
Hi cyChop. Thanks for your help, it works!

To work also in Chrome, I used:
-moz-binding: url("chrome://conkeror/content/ellipsis.xml#ellipsis");