Comments (7)
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!
from openjs-grid.
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.
from openjs-grid.
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.
from openjs-grid.
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.
- 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.
- 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.
from openjs-grid.
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
from openjs-grid.
Huh, good find. When I get a chance here I'll investigate a better fix for this. Good call!
from openjs-grid.
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! :)
from openjs-grid.
Related Issues (20)
- Drag & Drop Option in OpenJS Grid HOT 2
- No users table in sample.sql HOT 5
- Select drop-down to fill all rows on a column HOT 3
- Visible rows HOT 4
- Column width when grid is opend
- Support Chinese (or non-English language) HOT 1
- openJs-Grid Support For ASP.NET MVC
- No copyright in grid.php HOT 1
- Loading forever HOT 7
- populate an OpenJS grip based on the value HOT 1
- How to join multi tables with INNER JOIN to view desired columns from tables HOT 4
- undefined console.log(value, columnOpts, grid); HOT 6
- Conversion/update to PDO HOT 58
- Search Box issues and bugs
- Blank Row Allow HOT 1
- Grid class pass query instead of tablename HOT 2
- How to change and save column type image value in database HOT 4
- I am trying to achieve group view functionality as shown in picture can u help in that. Thanks in advance HOT 2
- how can i make this work with codeigniter?
- No database selected HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from openjs-grid.