JQGrid header and column not aligned

问题

I am using jqgrid, and in a particular flow, the headers and columns are getting misaligned. I have found similar questions on stackoverflow, but the solutions have not worked for me. For the record, I have set the widths of the columns dynamically based on the content of their columns, using a block of code that was provided by Oleg in this question. and then i am using setColWidth function of the jqGrid to set the grid width. I was debugging this issue that I am facing, and I had to look into jqgrid.setcolwidth.js where there is a function called dragEnd(). When i further looked into this function, I found that the first misalignment is happening in the following statement

!0===d.forceFit?(e=
this.headers[c+d.nv].newWidth||this.headers[c+d.nv].width,this.headers[c+d.nv].width=e,this.headers[c+d.nv].el.style.width=e+"px",this.cols[c+d.nv].style.width=e+"px",0<this.footers.length&&(this.footers[c+d.nv].style.width=e+"px"),d.colModel[c+d.nv].width=e):(d.tblwidth=this.newWidth||d.tblwidth,b("table:first",this.bDiv).css("width",d.tblwidth+"px"),b("table:first",this.hDiv).css("width",d.tblwidth+"px"),this.hDiv.scrollLeft=this.bDiv.scrollLeft,d.footerrow&&(b("table:first",this.sDiv).css("width",
d.tblwidth+"px"),this.sDiv.scrollLeft=this.bDiv.scrollLeft));

This snippet is there in jquery.jqgrid.min.js and the alignment does not get distorted for all the columns, but for the 11th column. After it returns from these 2 function calls to my js file, the width of the header of that column is different from the width of the td's of the column(both .jqgfirstrow and .jqgrow)

I am not sure what to make out of this and am at a loss trying to find the root cause of the problem. It will be really great if any of you can shed some light on why it might be behaving like this, or maybe how does jqgrid exactly set the widths of its columns and headers.

Note: the value of forceFit is false there.

Thanks in advance.

回答1:

I suppose that you use some old version of jqGrid. I suggest you to upgrade to the latest version of free jqGrid (it's version 4.12.1, but I plan to publish 4.13.0 in the next days). Free jqGrid is the fork of jqGrid, which I develop since the end of 2014.

I included many bug fixes and implemented new features in free jqGrid. the method setColWidth is included in the main code. Moreover there are many new features, like auto-adjustment of column width based on the column content, labelClasses, labelAlign (see the demo) and many many other features described in the readme to every published version and someone in the wiki.

I suggest you to use free jqGrid. You can load it from CDN, for example by usage URLs described here. I hope that the problem will be disappear automatically.

来源：https://stackoverflow.com/questions/35502465/jqgrid-header-and-column-not-aligned

标签

javascript

jquery

jqgrid