Applying style to table cell to truncate long text not working as expected.

Hi All,

We have a table where some of the columns contain long text strings. Our desired solution is to truncate the strings nicely and place the full string into a tool tip on that cell.

I am having trouble applying a style to the cell to truncate the text nicely.

I specify a fixed column width and specify a cellStyle Generator

localTable.setColumnWidth(columnKey, 200);

localTable.setCellStyleGenerator(new CellStyleGenerator() {
public String getStyle(Table source, Object itemId, Object propertyId) {
// TODO correct this so that we handle rows, and only apply to specific column etc…
return “truncate”;
[/code]I have a scss file with the style i wish to apply ie add an ellipsis if the column text is truncated.

@mixin table-cells($primaryStyleName : v-table-cell-content-) { .#{$primaryStyleName}truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } However while the style appears in the HTML output the style itself is not being applied to the String in the table cell.


Some really long text that should be truncated with an ellipsis but isnt
[/code]Instead what i get visually is the text just cutoff at the end of the cell border.

Unfortunately i am not a CSS guru, I assume something is blocking the application of the style properties to the cell text. Any help here would be appreciated.

(Note: I have no problems applying the tooltip, have just excluded it here for brevity)


I applied the following for .v-table-cell-wrapper and it works in my demo project.

text-overflow: ellipsis;
overflow: hidden;

Hi Joacim,

Thanks, after playing around with editing the applied styles in the browser dev tools and some google deep diving i managed to arrive at a similar solution.

.#{$primaryStyleName}truncate > .v-table-cell-wrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Using a Child Combinator Selector so that only v-table-cell-wrapper styled elements that are direct child elements of a v-table-cell-content-truncate styled element will have the ellipsis applied.

This allows us to selectivly apply the “truncate” style to table cells using a CellStyleGenerator so that only certain cells display the truncate behaviour rather than it being applied to all table cells throughout our application.

Only one downer left. Internet Explorer… we sometimes wish to apply this style rule to all cells in a column of a table with no fixed width set ie where we have let vaadin come up with the column width. This is so that when the column is resized text is not clipped but overflows with the ellipsis. Unfortunately in IE the largest string in such a column allways has the ellipsis on load of the table, if the whole table is wider than the browser window. Using the browser dev tools to manually remove the style shows the full text fine, as does manually increasing the calculated width by 1 px. Chrome & Firefox dont have this issue.

Does anyone know if there is a Vaadin friendly fix for this. Is there an easy way to have vaadin override the calculated width of a column and add 1 extra pixel to it?