Problem with frozen jqgrid column with Chrome browser

Question

Hi, I see the alignment difference in jqgrid to demonstrate a frozen column between chrome (v22) and firefox. Can any body tell me why this happens and what is its solution.

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

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

open the link above and go to the last section. ie frozen cols group header. Then select a demo of the frozen column demo or a frozen header group in the Chrome browser (v22) in Windows XP.

But alignment was correct in firefox (v 15) and safari (v5) in Windows XP

Answer 1

I cannot offer you a real solution to the problem, but I decided to write how I interpret the problem. Short answer: there is an error in the setFrozenColumns method when calculating the top position of a frozen div. Need to improve the code.

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

For example, in Firefox 16 dives have top: 24px; and top: 70px; and everything looks fine.

IE9 has the same value, but to see the grid correctly, you need to change the values ​​to top: 25px; and top: 71px;

In the same way, in Chrome 22. the same top: 24px; value top: 24px; and top: 70px; . To fix this problem, you can change the values ​​with the top: 23px; values top: 23px; and top: 69px;

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

After the changes, the appearance of the demonstration will be ideal, at least 100%, but if you change the scale to 200%, you will see that the initial values ​​are top: 24px; and top: 70px; it is better.

I believe that a real solution to the problem is not easy. It goes in the direction of setting the height attribute on each row of frozen parts of the grid and on each row of the non-frozen part. In the answer you will find the first step in the direction. The disadvantage is that after editing you will need additional code to recalculate the correct line height.

Answer 2

If you increase / decrease the font size, in all browsers the alignment will sometimes be correct, sometimes erroneous. It’s true that only in Chrome does it make a mistake for the default size, and all others (Firefox, Opera, Safari, Internet Explorer) start correctly, but they can all be corrected / incorrectly set when resizing. And not only vertical alignment, but also other things are also ugly - like the horizontal space between the frozen columns and the others and even its vertical size (it becomes obvious when you increase or decrease it too much).

When checking the DOM, you see that it actually displays two tables - one fixed, for frozen columns and one scrollable, for the rest. He is trying to put them together, but in the end, it's basically a hack. Regarding the fix, unfortunately, I don’t know anyone, but since this is a much more general problem than “doesn’t work in Chrome,” I expect plug-in developers to fix it eventually.