Column titles disappears

[Miqi180]

First of all, thanks for this amazing grid. If this issue can be resolved, then it'll work perfectly for my project where it is crucial that the user can navigate the grid WITHOUT having to use the mouse.

The problem is that when you tab down to the end row of a grid with multiple pages, the row of headerCells (column titles) disappear. If you then Shift+tab back up to the top row, the column titles row reappears, but is positioned incorrectly on the page relative to the "grid body". This is true not just with my adaptation of your code, but also on http://square-bracket.com/openjs (examples).

Any ideas how to resolve this?

thx, Mike

[optikalefx]

Hey,

I tried tabbing around and I do see that it tabs to my hidden cells behind the header, but I didn't see the title row get messed up. Can you detail how you got that to mess up for me?

Thanks!

[Miqi180]

Thanks for the swift reply.

Just keep tabbing when you reach the end row, and the title row will start to move up. Maybe you want a screen shot? Let me know.

As you rightly mention and I forgot mention, it does tab up to hidden cells behind the header. I'm not sure if this is related to the first issue or not, but any help is highly appreciated as this needs to be resolved in my project as well.

[optikalefx]

So for me, on Chrome 33 on OS X Mavericks, I can tab through every field all the way to the next elements on the page and it doesn't seem to graphically effect anything. So a screenshot would help here.

In order to not allowing tabbing to the hidden cells, they just need tabindex="-1" on them. You can edit that in the grid.js in the columnHeader template if you'd like and make a PR. Otherwise, I can make an update for that and test it out very soon.

[Miqi180]

Seems I haven't been specific enough, my apologies for that.

First of all, I use Firefox 27.0.1 (currently latest ver) on a Windows system.

1) The row titles disappearing. By "the end row" I do not mean the end row in the grid viewport, but rather in the entire grid. For instance, your first demo grid on http://square-bracket.com/openjs has 20 rows in total. If you tab to the end row of the TutorialID column and hit tab again, the problem occurs. What you expect is to continue to row 1 of the next column (CategoryID) which indeed happens, but the title row is now moved up slightly, relative to the "grid body". Also notice that the vertical slider is now disconnected with the title row.

If you then keep hitting tab it will keep moving up, eventually disappearing. Keep hitting tab and it will reappear, but it's then repositioned incorrectly above the grid body as in the picture.

I tested your first demo grid on square-bracket on Chrome as well and in that browser I cannot reproduce the problem. Seems then, that the issue is somehow related to Firefox' (and possibly other browsers') layout engine.

2) Tabbing to hidden cells. I modified the column header template in grid.js with tabindex='-1', but unfortunately it didn't do the trick (not in my adaptation of your code anyway).

Sorry for the trouble, but I hope we can get to the bottom of both these issues.

[Miqi180]

Hi again,

I've finally found out what's causing the disappearing row titles. It's a Firefox bug that has to do with postion: absolute/relative in tables. See: http://stackoverflow.com/questions/14777528/table-cell-with-position-relative-and-content-absolute-bug-in-firefox

Specifically, it's the following line of code in grid.css that causes the problem in Firefox:

div.gridWrapper .columns .cell.headerCell { position: absolute; }

If your page only contains ONE grid, you can change the position to fixed and everything will work fine, but this will not work on pages with multiple grids, such as your demo page on square-bracket.

With regards to tabbing to hidden cells, it is now working.

Keep up the good work, Mike

[optikalefx]

Huh, good find. When I get a chance here I'll investigate a better fix for this. Good call!

[Miqi180]

Thanks, I'm only glad to help, and since I've investigated this quite a bit already, I might as well give you some pointers.

Some possible workarounds are mentioned here: http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements

I haven't tested any of these suggestions, but it seems to me they forget to mention the most obvious fix which is to move the child element out of the parent element and assign it a position property other than absolute. At this stage, I'm not quite sure if this can be readily achieved in OpenJS or if it requires a major rewrite, but you probably have a good idea how much work it would take.

I did try the following IE hack by adding an empty div in the columnHeader template and it does not work in Firefox: http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/

Still, the author describes the problem very well and remarks: "It may not be the most efficient layout but it’s valid and works in all browsers. Except IE6, IE7, and possibly IE8 … sometimes." Apparently there are similar issues with Firefox, so maybe a different OpenJS layout is warranted here?

Anyway, since I'm only using one grid per page it now works very well for me after changing the position property.

GL with fixing this annoying little issue which should have been fixed by the browser developers ages ago! :)