Scrolling with tab not working in Chrome

Question

I found that if I put a table element inside a div element and set the div properties somewhat like width, height and overflow: auto; and put some input element inside the td table. than moving with tabs, and found that scrolling does not move with tabs (if the input elements contain some data). These problems are found only in Chrome, not in other modern browsers. Here is a sample code:

<div style="overflow: auto; height: 100px;width:400px;"> <table > <tbody> <tr> <td style="width:100px;"><input value="1" type="text"/></td> <td style="width:100px;"><input value="2" type="text"/></td> <td style="width:100px;"><input value="3" type="text"/></td> <td style="width:100px;"><input value="4" type="text"/></td> <td style="width:100px;"><input value="5" type="text"/></td> <td style="width:100px;"><input value="6" type="text"/></td> <td style="width:100px;"><input value="7" type="text"/></td> <td style="width:100px;"><input value="8" type="text"/></td> <td style="width:100px;"><input value="9" type="text"/></td> </tr> </tbody> </table> </div> 

I also created a link to plunker:

http://plnkr.co/edit/1l8HftcoDlebywQ8LDos?p=preview

http://embed.plnkr.co/1l8HftcoDlebywQ8LDos/preview

Any help regarding this would be greatly appreciated.

Answer 1

On windows 8

Chrome: scrolling with TABKEY doesn't scroll to make visible line outside tbody viewport correctly

Version 39.0.2171.95 Version 41.0.2257.0 canary (64-bit) Version 41.0.2236.0 (64-bit)

IE 11 Firefox 31.0 is working properly

At the same time, my solution was tested with the latest Chrome and IE11 browsers

  // rowObj is javascript <tr> element object rowObj.addEventListener("focus", function( event ) { console.log("focus visible row=" + event.currentTarget.sectionRowIndex); if(event.currentTarget.sectionRowIndex === 0) detObj.scrollTop = 0; //detObj is javascript <td> else if(event.currentTarget.sectionRowIndex > 4) // is the max visible rows in <tbody> detObj.scrollTop = 9999; // will focus on last row in <tbody> }, true); 

// If necessary, I can provide javascript code to calculate the number of visible lines in

Answer 2

Perhaps try reinstalling Chrome and / or try the same code in Safari. Perhaps try a mouse or use your trackpad if you are already using it.