Jqgrid column headers and data not aligned

Question

I have a table that is dynamic and is generated in code located in C #. I use tabletogrid to convert this html table to Jqgrid and the code I use for this is

tableToGrid('#gvSearchDocuments', { height: 'auto', autowidth:true, multiselect: true, pager: 'pagersearch', rowList: [20, 30, 50], colNames: ['ID','Message Date', 'Fund', 'Partner', 'Menu', 'Sub Menu', 'Document Name', 'Document Description', 'Type'], colModel: [ { name: 'ID', hidden: true}, { name: 'MessageDate', align: 'right', sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'MdY' } }, { name: 'Fund', align: 'left'}, { name: 'Partner', align: 'left' }, { name: 'Menu', align: 'left'}, { name: 'SubMenu', align: 'left'}, { name: 'Documentname', align: 'left' }, { name: 'DocumentDescription', align: 'left'}, { name: 'Type', align: 'left' } ] }); 

The problem is when jqgrid is created, column headers and data are not aligned right. I tried to play with autoWidth, width and shrinkToFit, but no luck. This is how my grid appears in IE, Firefox, and Chrome.

I spent more than a day on this, and he slowly killed me. Any help would be great!

Answer 1

Finally, I was able to fix this problem.

I mistakenly hid a regular HTML table before calling tableToGrid with display: none; , and then showed it after conversion using display: block; . display: block; inherited by data cells, which negatively affects them. Their resizing was blocked when the headers were resized (they stopped resizing as soon as they reached the minimum width needed to display the entire contents of the cell).

Take a look at jsFiddle to reproduce the problem. If you comment out the last line in the script, the problem will disappear.

BTW I know that tableToGrid is small (this is terrible in terms of performance), but in a special case in my application - the only approach I can use that does not require mass rewriting of a lot of legacy code.

Answer 2

Try applying this property to your table.

 table-layout: fixed; 

This will work for me. I hope this can be useful for you.

Answer 3

edit css with

 .ui-jqgrid tr.jqgrow td{ white-space: normal; }