31

If column label text is wider than column width, label text is truncated. Increasing column width is not nice since some texts are long. How to make text to word wrap into multiple lines? Header height should be determined by maximum column height.

Only solution which I found is

jQgrid: multiple column row headers

but this does not implement word wrap of text.

How to implement word wrap of header text ?

Update. I tried Oleg styles for character and word wrap.

Character wrap

    th.ui-th-column div{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
    padding-top: 3px;
    padding-bottom: 3px

}

shows only half of second line. Third line is not shown at all:

Character wrap does not show third line

Word wrap

  th.ui-th-column div{
   white-space:normal !important;
   height:auto !important;
   padding:2px;
   }

disables column resize for wrapped columns. On those columns moving mouse icon to column divider mouse cursor does not change to sizer. Wrapped columns cannot resized.

How to fix those issues ?

Update 2

I tried character wrap (last sample in Oleg reply). I found issues if column width is decreased so that more lines appear in header:

  1. Column cannot resized if dragging in bottom of column divider: resizer height is not increased on resize.

  2. In IE9 header height increase is not sufficient: last header line is not visible after resize. In fireFox this issue does not occur.

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378
  • look at [the answer](http://stackoverflow.com/questions/3641400/problem-with-wrapping-jqgrid-column-headers-on-ie/3641561#3641561). So in column headers works the same wrapping like in [cells](http://stackoverflow.com/questions/2994343/how-to-implement-wordwrap-on-jqgrid-which-works-on-ie7-ie8-and-ff/3006134#3006134). Moreover it is possible to implement **character** wrapping see [here](http://stackoverflow.com/questions/6510144/jqgrid-long-text-wrapping/6915486#6915486). The same CSS styles could be used in column headers if it needed. – Oleg Aug 30 '11 at 16:59
  • @Oleg: Thank you. I tried both methods but encountered issues. I updated question. – Andrus Aug 30 '11 at 17:55

3 Answers3

39

In your example with character wrapping you forgot to use !important after the height: auto setting.

I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.

The new demo with the word wrapping is here. the code is the following:

var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;

grid.jqGrid({
    ...
});

// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
    .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
    'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
    this.style.cssText = resizeSpanHeight;
});

// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
    var ts = $(this);
    ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});

It use the following CSS

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

and produce the following picture

enter image description here

(I included <br/> after every character in the first column to make the text "Inv No" by placed on many rows).

Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):

enter image description here

You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div to the following

th.ui-th-column div {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}

we will receive the following results (see the demo here)

enter image description here

By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as

enter image description here

So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/> inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.

Random42
  • 8,989
  • 6
  • 55
  • 86
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thank you very much. I marked and upvoted answer. Also I encountered some issues and updated question about those – Andrus Aug 31 '11 at 15:51
  • 2
    header manipulation code should be executed from resizeStop event also if header height is increased – Andrus Aug 31 '11 at 16:20
  • @Andrus: You are welcome! I full agree that the recalculation of the `top` and `height` parameters should be done on `resizeStop` event. I will change the code of the demos to make other people to use the better code at the beginning. – Oleg Aug 31 '11 at 16:44
  • it looks like resize span width is also too small, resizing requires presice postioning. Maybe to make it a bit wider also. – Andrus Aug 31 '11 at 17:28
  • I tested Windows Mail and it allows resizing more easily. jqGrid resize area width should increased. – Andrus Aug 31 '11 at 17:30
  • resizing does not start if cursor is right from column border, it starts only if cursor is few pixels left. How to change this so that resize starts in both sides and resize area width is bigger ? – Andrus Aug 31 '11 at 17:33
  • 2
    @Andrus: I am not sure that I correct understand what setting you want to increase. The `margin-top` and `margin-bottom` can be set to 0: `margin-top: 0px; margin-bottom: 0px;`. To increase the `width` of the resize area one will be probably make the area *over* the `div` with the text. Currently the area has the width 2px which corresponds to the padding of the `padding-right` of the div with the text. – Oleg Aug 31 '11 at 17:43
  • I'm looking for a way to increase width of resize area. How to make it wider like in other applications? This probably requires to put it above header text div. – Andrus Aug 31 '11 at 17:59
  • @Andrus: One should use probably `position: absolute` for the corresponding `` element to place in not inside of the `` element, but *over* the vertical border which divide `` elements. The main problem is to make the changes so that other jqGrid code will works without additional changes. – Oleg Aug 31 '11 at 18:20
  • I added `var resizeSpanHeight = 'height: ' + headerRowElement.height() + 'px !important; cursor: col-resize; width:10px;';` to my application and this makes resize area 10px wide. Usage experience is a lot better. Will this break something? How to add similar area to right side also? – Andrus Aug 31 '11 at 18:35
  • is it reasonable to make div 20 px wide and use negative margin to move it to center of border or something similar ? – Andrus Aug 31 '11 at 18:38
  • maybe because of the more recent grid version but not sure, but somehow d.siva's CSS answer below seemed simple and worked fine for me – msanjay Oct 18 '13 at 08:34
  • @msanjay: I discussed in my answer differences between word wrapping and char wrapping. Some languages like German have grammatical rule where long word will be built from multiple words. In the case column headers can contains *one long word*. Char wrapping is much more effective in the case, moreover (like I described in details) it will be interpreted as word wrapping if spaces exist in the text. Additionally I shown how to increase the size of resizable area (for resizing columns). You should decide yourself which kind of wrapping you need and whether you need to increase resizable area. – Oleg Oct 18 '13 at 08:48
  • @Oleg: Sorry to dredge up an old answer. While this works great for the text of the header, it has some strange behavior when the `viewsortcols` is set to always show the sort arrows. The issue is 2-fold; the width of the icons do not force a wrap and are not visible to the right if the title 'just fits' the width of the column, and also the arrows flow to the end of the last word instead of staying centered vertically. – David Culp Nov 19 '13 at 17:30
  • @Oleg, Thanks for code! I'd avoid setting any absolute values - `ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');` It will misalign header lables if you change grid width dynamically – sad comrade Jan 29 '16 at 14:22
  • @Chintsu: Sorry, but you have to be more exact. Which "lables" you mean? Moreover you should see that the answer are written 4.5 years before for jqGrid existing at the moment. The structure of column headers now is another. Which version of jqGrid you mean and from which fork of jqGrid? I develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) since more as one year. I have *another structure* of column headers and wrapping of symbols works mostly by adding describes CSS. See [the demo](http://jsfiddle.net/OlegKi/andm1299/26/) for example. Try to reduce the width of outer window. – Oleg Jan 29 '16 at 14:55
  • @Chintsu: one could just increase the `height` of `.ui-jqgrid-resize` inside of column header only, but it's only fine tuning. – Oleg Jan 29 '16 at 14:59
  • @Oleg, Your free jqGrid looks great. I'm using jqGrid 4.4.0. Just wanted to leave warn note here. – sad comrade Jan 29 '16 at 15:11
  • Hi @Oleg,how do i call below code dynamically // increase the height of the resizing span resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;'; headerRow.find("span.ui-jqgrid-resize").each(function () { this.style.cssText = resizeSpanHeight; }); – karthickeyan Nov 12 '19 at 05:03
  • @Oleg, Because after resizing the header column , the resize icon not showing only few pixels when hovering its shows the icon. because the height set to 20px for the span.ui-jqgrid-resize class – karthickeyan Nov 12 '19 at 05:06
  • @karthickeyan: Sorry, but I can't follow you. Which version of jqGrid you use? The default CSS style and the components of the resizing header is changes since the answer posted 8 years ago. – Oleg Nov 12 '19 at 22:24
  • http://jsfiddle.net/OlegKi/andm1299/26/ if you check this fiddle, after resizing the header column, .ui-jqgrid-resize class height always set to 22 px. the height is not changing dynamically. so after resizing the column below the 22 px if i hover mouse on column line resize icon not showing – karthickeyan Nov 13 '19 at 03:31
  • Below is the css .ui-jqgrid .ui-jqgrid-labels>.ui-th-column>.ui-jqgrid-resize { height: 22px; width: .3em; position: relative; cursor: col-resize; -webkit-touch-callout: none; -khtml-user-select: none; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -o-user-select: none; user-select: none; display: inline; overflow: hidden; } – karthickeyan Nov 13 '19 at 03:33
  • I want to change the height of the .ui-jqgrid-resize class 22px; value dynamically when resizing the column also – karthickeyan Nov 13 '19 at 03:34
  • Hi @Oleg could you help on this – karthickeyan Nov 14 '19 at 04:28
  • Hi @Oleg, after using the resizeStop method now it works fine. Thanks – karthickeyan Nov 20 '19 at 07:04
  • @karthickeyan: It's a good news! Sorry, I'm very busy now with projects of my customers and can't find time for answering questions on stackoverflow. – Oleg Nov 20 '19 at 09:57
19
<style type="text/css">
    .ui-jqgrid .ui-jqgrid-htable th div
    {
        height: auto;
        overflow: hidden;
        padding-right: 4px;
        padding-top: 2px;
        position: relative;
        vertical-align: text-top;
        white-space: normal !important;
    }
</style>
d.Siva
  • 1,140
  • 3
  • 20
  • 42
4
Following code wraps row data

.ui-jqgrid tr.jqgrow td
    {           
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
    }

Following code wraps table header data    
    .ui-jqgrid .ui-jqgrid-htable th div
        {
          word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
        }
shalini
  • 41
  • 2