Multiple line table header

Vaadin 6 / 7 / 8 Framework UI
1

I was wondering how to achieve this?

I tried using this as a column header ==

Name
Host

It works but the column header height stays fixed to a single line height so the above is cut off.

Is there a preferred way to do multiple line column headers?
Is there a way to adjust the column header height?

Any help would be appreciated

2

I have no idea what exactly you are trying to do, since that’s HTML layout compared to Vaadin GUI code, and even then, it’s not valid HTML: you have “Name” inside the table element just hanging there.

Perhaps you just meant something like:

Host
Name

Also, while the center tag is allowed, it’s old fashioned and is deprecated for CSS instead.

Good luck!

3

Sorry here is what i wanted to achieve 2 line header:

Host
Name

Thus getting for a column Header:
Host
Name

Concerning i plan on changing to css class but first I need to know how to get multiple line column headers to work

4

You probably have to help out as to what you are truly trying to do. Making two items stack on top of each other, for example, is done with a VerticalLayout.

And if you just want to insert HTML, you can put whatever you want into a Label, setting it’s type to XHTML, for example, but it’s really not clear to me what you are really trying to do with Vaadin.

5

I am trying to have mutliple lines in a table header.
I am sorry I was not clearer.

ie

Host IP Port
Name Address Number

As table headers

6

You mean “Host Name” wrapping automatically if the column is too narrow, or Host on one line and Name on the other, always ?

7

Host on one line Name on the other and both of them centered

8

I am able to put correct html table tags representation of this into table header,
but the header itself does not resize, so the two line table appears cut off because the table header sizes for one row

9

I understand your need perfectly. But I would consider adding plain, unescaped HTML inside the table header as an undesigned feature that shouldn’t be allowed in the first place, but that’s another issue.

The problem is that the CSS for the table defines the header as exactly that high, and you need to override that in a custom theme. There’s an older thread on the forum about this same thing, if I recall correctly.