Scrolling with tabbing not working in Chrome

Question

I've found that if I place a table element inside div element and set div's properties somewhat like width, height and overflow:auto; and place some input element inside table's td. than moving with tabs and found that scroll doesn't move with tab (if input elements contains some data). This issues encounters only in Chrome not in other modern browsers. Here is 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've also created a link on plunker:

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

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

Any help regarding this will be highly appreciated.

Kalikow

I am using Chrome 38 on my Mac and everything is scrolling properly when I tab through the boxes. – Schnorkle

i am using windows-8 OS and it looks like this problem encounters in windows OS only however i did not try this on Mac. – Kalikow

I'm using Chrome 38 on a Windows 7 machine, and it works fine. It may be Windows 8 specific? – Primero

but i'm facing same problem in window 7 machine. – Kalikow

Answer 1

On Windows 8

Chrome: Scrolling with TABKEY does not scroll to make visible a row outside the tbody viewport correctly

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

Works correctly on IE 11 Firefox 31.0

Herewith my solution tested with latest Chrome & IE11

        // 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 required I can supply javascript code to calculate number of visible rows in

Arezzo

actually i don't wanna use js to scroll, it seems to be chrome issue but i'm not sure about it. – Kalikow

Answer 2

Possibly Try Re-Installing Chrome, and/or try this same code on Safari. Maybe try a mouse, or use your trackpad if already using one.

Avestan