Table row height when using labels

Hi,

I’m trying to create a table with 2 columns. 1 column needs to combine and format two strings from my container (“Title - Description”. The other column is simply a Timestamp that needs to be sortable.

I’m using an indexed container with the following properties set:

container.addContainerProperty("NewsDescription", Label.class, null);
container.addContainerProperty("Date", Timestamp.class, null);

I then iterate through my list of data and create my label for column 1 and then set the date for column 2:


newItem = container.getItem(container.addItem());
newsText = new Label("<b>" + item.getTitle() + "</b> - " + item.getDescription());
newsText.setContentMode(ContentMode.HTML);
newItem.getItemProperty("NewsDescription").setValue(newsText);
newItem.getItemProperty("Date").setValue(item.getCreationDate());

This very nearly works perfectly - I get my lazy loading, I can hide the table headers, I can sort by date, the performance seems good…

The only problem is that the label wraps onto 2 lines, as does the Timestamp. If I try and manually set the column width for the Timestamp / date column, it works and allows my date to take 1 line, however it creates some strange behavior in the table, with a large gap appearing when you scroll to the bottom of the table. It also causes the table data to jump when scrolling (if you scroll to row 100, it will jump back to 90 for example).

If I fix the Label height manually like so: newsText.setHeight("1.5em"); , it works visually, but again my table experiences strange behaviour with a gap at the bottom and jumpy scrolling. I think the reason for the gap is that the table thinks each row is still 2 lines deep, when in reality it has updated to 1 line when the date width is manually set. If I shrink the date and put it back on 2 lines, the table occupies the full space available again without the gap, so perhaps this fix will work for the Label height if I can get the date column width fixed before the table is drawn or something.

Attachment 1 shows the table working, but with the wrong row height / column width. Attachment 2 shows what happens to the bottom of the table when I try and fix the row height and width.

Any ideas how I can avoid this behavior and fix my row heights to standard 1 line only height? I wan’t to keep the label if possible, as I want the Title and Description to be 1 sentence, rather than have each in 2 different columns, as it is a much more efficient use of space for my goal.

Cheers,
D
12919.png
12920.png

Anyone able to help with this?

Somehow seem related to the height calculation of the table rows, as you pointed out. And like you said, the height seems to be calculated before the column width is set, so the table thinks the labels are two lines high or something.

As a workaround, have you tried setting the size of the label to undefined/auto (newsText.setSizeUndefined()). The Label component is 100% wide by default, and that causes it to wrap when space runs out. But if set to undefined width, it won’t wrap anymore. I think that might correct the issue.

Still, worth a bug ticket in my opinion.