set word wrap in table column headers

Hi,

I was just wondering if it possible to set word wrap in column headers?

Right now, my column headers are too long and the user has to scroll left and right to view the entire header.

Is there any possible solution or any alternatives?

Hi Chan,

There are at least some threads on the forum already how to make the table headers wrap to two lines instead of one. You can use the search to find them.

Basically it involves a custom theme (one CSS file) and a little bit of CSS.

Thanks Jouni.

I did try to search for this.
I found some results and I tried them. It didn’t work for me. It may be because I was using the wrong CSS.
I’m not sure which name to use, whether it is .v-table-header-wrap or .v-table-header or v-table-header-cell

This is what I tried


.v-table-header-wrap {
white-space:normal
}

I also read a post about setting the height of the table header cell? So I tried


.v-table-header {
height:100px;
}

Please point me to the right direction. Thank you!

I actually read a post about setting the height of the table columns.

The thread name is called Problem with table header height.

But, where do I reset the images for the table header?

Okay, nevermind. I got it! Woot!

Just put a new background in the custom css.

Curious what exactly your CSS looked like…and more curious that setting the background fixes word wrap!

well the back ground doesn’t fix the word wrap itself

it’s just that when i made the height bigger in table column headers - the background for the table header column didn’t render properly. it kept showing some weird stuff.
i had to resize those back grounds.

Could you please share the CSS and the code for doing this? i am facing the same problem

I did the following

.v-table .v-table-header-wrap {
white-space:normal

}

.v-table-caption-container
{
height: 125px;
}

.v-table .v-table-header-cell{
height: 125px;
background: none;
}

.v-table .v-table-caption-container {
text-transform: none;
font-family:calibri;
font-weight:normal;
font-size:13px;
white-space: normal;
height: 125px;
background: none;
}

But it is not reflecting at all. It would be really very much helpful for us. thanks

Another simple solution is to extend Table and overwrite getColumnHeader() like this:


	/**
	 * {@inheritDoc}
	 */
	@Override
	public String getColumnHeader(final Object propertyId) {
		final String originalHeader = super.getColumnHeader(propertyId);
		if (originalHeader != null) {
			final String layoutedHeader = originalHeader.replaceAll("\n", "<br />");
			return layoutedHeader;
		}
		return originalHeader;
	}

its no auto word wrap but you are free to define line breaks in header text.

in Vaadin7

table.addStyleName(“wordwrap-headers”);


 .v-table.wordwrap-headers .v-table-header-wrap {
	height: auto;
}

.v-table.wordwrap-headers .v-table-header {
	min-height: 20px;
	height: auto;
}

.v-table.wordwrap-headers .v-table-header-cell {
	vertical-align: top;
	position: relative;
}

.v-table.wordwrap-headers .v-table-resizer {
	height: 500px;
	float: none;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 2px;
}

.v-table.wordwrap-headers .v-table-caption-container {
	white-space: normal;
}

.v-table.wordwrap-headers td.v-table-header-cell,
.v-table.wordwrap-headers td.v-table-header-cell-desc,
.v-table.wordwrap-headers td.v-table-header-cell-asc {
	display: inline-block !important;
	position: relative;
}