1

In latest jqgrid column headers and data are not aligned in some cases.

Here is image:

no aligned

How to fix this ? It occurs in some cases. It is probably possible to provide url which uses javascript from raw github and reproduces the issue.

Answer in Jqgrid Column Headers and data not aligned describes possible fix but I was unable to apply it in my case.

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378
  • Typically it's some CSS problem, but I can't help you without the demo which reproduce the problem. One have to analyse the problem using Developer Tools. – Oleg Nov 22 '15 at 22:47
  • @Oleg It occurs if zoom level if different from 100% in Chrome. It does not occur in Chrome at 100% zoom level. It does not occur in `4.9.2-post` version of jqgrid. In occurs in yesterdays version from github. What exactly should analyzed ? – Andrus Nov 23 '15 at 07:14
  • I can repeat, that such problem can't be solved if you post some description. The only way to solve the problem is analyzing the demo, which reproduces the problem. I suppose that you made some customization on CSS settings inside of jqGrid (another font site andother padding or margins), but the customization don't work more. Thus posting the picture is not enough to solve the problem. – Oleg Nov 23 '15 at 07:40
  • I see the problem no so dramatically as on the picture which you posted in your question. I suppose that you already fixed some issue in your CSS. The difference between the width of headers in the width in data is less as 1px and it exists only in Chrome. All other web browsers, where I tested, display the grid perfectly. I will examine the demo later. More important could be the encoding problem which I described [here](http://stackoverflow.com/questions/33858311/how-to-force-jqgrid-4-10-1-pre-to-encode-character-always/33860430#comment55499306_33860430). Please test it, before commit there. – Oleg Nov 23 '15 at 10:36
  • At 1024x768 screen resolution and at 33% zoom level issue is very significiant (deviation is 30% from column width). I havent changed CSS. – Andrus Nov 23 '15 at 11:12
  • @Oleg It looks like using http://www.ok-soft-gmbh.com/jqGrid/OK/jqGrid/js/jquery.jqGrid.src.js fixes the issue. Thank you. – Andrus Nov 23 '15 at 15:51
  • You are welcome! I will post my answer soon with details and I will commit the changes to GitHub, but I want to clear the question with encoding before. – Oleg Nov 23 '15 at 15:58

1 Answers1

1

I analysed the problem. The reason of such behavior: calculation of width of 1px after scaling in Chrome.

jqGrid uses table-layout: fixed; in both .ui-jqgrid-htable and .ui-jqgrid-btable. Thus the width of every column specifies the width of <td> or <th> elements of the first row <tr> of the <table>. The next requirement is the usage of fixed value for the table width. Old versions of jqGrid set the width value on both tables .ui-jqgrid-htable and .ui-jqgrid-btable, which will be calculated. It's not really required. Moreover one can see problems if the width of the <table> is higher (even on some pixels) as the total sum of widths of all elements. It's the reason of the reported problem.

I changed now the code of free jqGrid so, that I set width: 1px on both tables .ui-jqgrid-htable and .ui-jqgrid-btable. It's enough for making CSS table-layout: fixed; working and it fixes the reported problems. I will post the changes to GitHub today later. One can test the fix by editing width value of the grid (.ui-jqgrid-btable) with respect of Developer Tools of Chrome. After setting width: 1px the reported problem disappears.

UPDATED: The changes are now posted to GitHub.

Oleg
  • 220,925
  • 34
  • 403
  • 798