Jqgrid Column Headers and data not aligned

Question

I have a table that is dynamic and is generated at the code behind in C#. I use tabletogrid to convert this html table to a Jqgrid and the code I use to do that 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: 'M-d-Y' }
                                    },
                                    { 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 I have is when the jqgrid is generated, the column headers and data is not aligned right.I tried playing with autoWidth, width and shrinkToFit but no luck there. This is how my grid appears in IE,Firefox and Chrome.

I have spent more than a day on this one and its killing me slowly. Any help would be great !

Answer 1

I was finally able to fix the issue.

I was erroneously hiding the plain HTML table before calling tableToGrid with display: none; and then showing it after the conversion with display: block;. The display: block; was inherited by the data cells, affecting them negatively. Their resizing was blocked when the headers were resized (they stopped resizing once reached the minimum width necessary to show to entire cell content).

See this jsFiddle to reproduce the issue. If you comment out the last line in the script the issue disappears.

BTW I know that tableToGrid is not great (it is terrible in terms of performances) but in a special case in my application is the only approach I can use that doesn't require a massive 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 may be helpful for you.

Answer 3

edit css with

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