Wrapping column headers

[robert]

In my quest to get more informative column headers w/o blowing out the horizontal space requirements, is it possible to get the column header to allow wrapping?

[jack.slocum]

You could increase the header column height in the css and turn on white-space wrapping. But if there was nothing to wrap it will still have the space. The height has to be fixed in order to do layout calculations.

[robert]

I finally made some time to try this - it worked out well, so I thought I'd document it here in case someone else finds it useful.
The css changes I made were as follows (I've only included the modified css, with a comment to indicate the actual changes):


.ygrid-hd{
background-color: #ebeadb;
border-bottom: 3px solid #cbc7b8; /* set to3px as adding height 100% made it too thin */
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
position: absolute;
overflow:hidden;
height:100%; /* added */
}

.ygrid-hd-body {
border-bottom: 2px solid #d6d2c2;
cursor: default;
display: block;
font: normal 8pt arial;
left: 0;
overflow: hidden;
padding: 3px 5px;
position: relative;
top: 0;
white-space: wrap; /* changed from nowrap */
height:100%; /* added */
}

.ygrid-hd-body span {
font: normal 8pt arial;
white-space: wrap; /* changed from nowrap */
}

.ygrid-hd-split {
background-image: url(/images/grid/tall-grid-split.gif);/* changed to use a taller image */
background-position: center;
background-repeat: no-repeat;
cursor: e-resize;
display: block;
font-size: 1px;
height: 31px; /* set to height of header - 4px, where 4px = top + 2px :-) */
overflow: hidden;
position: absolute;
top: 2px;
width: 6px;
z-index: 3;
}

.ygrid-hrow{
background-color: #ebeadb;
display: block;
height: 35px; /* set to required height - 35px works for 2 rows of text */
left: 0;
position: relative;
top: 0;
width: 10000px;
overflow:hidden;
z-index:2;
}

.ygrid-hrow-frame{
height: 35px; /* set to required height */
left: 0;
display:block;
position: absolute;
top: 0;
width: 10000px;
z-index:1;
}



I also changed one or two other css settings to make the mouseover a little more obvious, but that's just personal preference.

[jack.slocum]

Great Robert, I'm glad that worked for you. Thanks for sharing your code as well.