4

Hi i am seeing alignment difference in jqgrid frozen column demo between chrome(v22) and firefox. Can any body tell me why it is happening and what is the fix for it.

enter image description here

if you look at the screenshot, you will see some horizontal alignment difference between client and Amount columns.

you can see the same on live at below link: http://www.trirand.com/blog/jqgrid/jqgrid.html

open above link and go to last section i.e frozen cols group header. Then select frozen column demo or frozen column group header demo in chrome(v22) browser in windows XP.

But the alignment was proper in firefox(v 15) and safari(v5) in windows XP

Rohini Kumar
  • 249
  • 1
  • 5
  • 15

2 Answers2

4

I can't suggest you real solution of the problem, but I decide to write how I interpret the problem. The short answer is: there are a bug in setFrozenColumns method in the calculation of top position of the frozen divs. One should improve the code.

There are two divs: one for the frozen header (the div having classes frozen-div ui-jqgrid-hdiv) and another for frozen body (the div having classes frozen-bdiv ui-jqgrid-bdiv). If you open "Frozen Cols.Group Header(new)" / "Frozen column with group header" demo from the official jqGrid demo page and examine the value of top attributes in different web browsers you will find out that in some browsers the value of top should be increased or decreased to 1px to have correct view.

For example in Firefox 16 the dives has top: 24px; and top: 70px; and all looks OK.

In IE9 one have the same value, but to see the grid correctly one have to change the values to top: 25px; and top: 71px;

In the same way one have the same value top: 24px; and top: 70px; in Chrome 22. To fix the problem one can change the values the values to top: 23px; and top: 69px;

You can use Developer Tools of Chrome (and the same for IE) to verify that changing of top attribute fixes the problem:

enter image description here

After the changes the look of the demo will be perfect at least at 100%, but if you would change zoom to 200% you will see that original values top: 24px; and top: 70px; are better.

I suppose that the real solution of the problem is not easy. It goes in the direction of setting height attribute on every rows of the frozen parts of the grid and on every rows of non-frozen part. In the answer you would find the first step in the direction. The disadvantage is that additional code will be required to recalculate the correct height of the row after editing.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • sorry for the delayed response and delay in accepting the answer – Rohini Kumar Oct 30 '12 at 05:46
  • as a fix to the above problem, i have used following line and called this line after gridcomplete which solved my problem. `jq("#gview_"+gridId+" div.frozen-bdiv").css(jq("#gview_"+gridId+" div.ui-jqgrid-bdiv").position());` – Rohini Kumar Oct 30 '12 at 06:17
  • @usergigantic: Thank for the information! I'wil try this later. Your code corresponds the line `$(this.grid.fbDiv).css($(this.grid.bDiv).position());` from [the answer](http://stackoverflow.com/a/8771429/315935) which I referenced. – Oleg Oct 30 '12 at 07:11
2

If you increase/decrease the font size, in all browsers, the alignment will sometimes be right, sometimes be wrong. It's true that only in Chrome it gets wrong for the default size, while all others (Firefox, Opera, Safari, Internet Explorer) start right, but all of them can be adjusted/misadjusted when you change the size. And not only the vertical alignment, but other things get ugly too - like the horizontal space between the frozen columns and the rest, and even its vertical size (becomes apparent when you increase or decrease it too much).

Inspecting the DOM, you see that it actually renders two tables - one fixed, for the frozen columns, and one scrollable, for the rest. It tries to place them as to appear a single consistent thing, but in the end it's mostly a hack. As for a fix, unfortunatly I don't know any, but since it's a much more general problem than "doesn't work on Chrome", I expect the plugin developers to fix it eventually.

mgibsonbr
  • 21,755
  • 7
  • 70
  • 112