Need vertical alignment of items in a Table

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

can you tell me how to vertically align items in a Table? I need to have mixed rows containing text and buttons and icons and text always is aligned to the top of the row which doesn’t look very nice when the icon has a height of 40 px…
Horizontal alignment can be done by using setColumnAlignment(ALIGN_CENTER), but it seems there is no aligment mode defined for the vertical dimension as it is for a Layout (using setComponentAlignment(c, Alignment.MIDDLE_LEFT)).

Regards
Andreas

2

Hi,

You can’t control the alignment from the server side (Java). You need to use CSS for that.

Try adjusting the line height for the rows, make it equal to the height of the icon (40px).

3

Hello Jouni,

I finally got around to solving the problem for our setup as icons in different tables can have different heights.
All I had to to was to add an override for the alignment in our custom theme (inherits reeindeer) to:

.v-table-cell-content {
	vertical-align: middle;
}

Perhaps there should be an option to select from different styles, e.g. .v-table-cell-content-top, .v-table-cell-content-center or .v-table-cell-content-bottom. As I understand this should be able to achieve with an attribute sent by the server to the widgets client side.

Regards
Andreas