Chrome does not scroll the focused editable row to the viewport

This issue is only happening in Chrome. (jqgrid v 4.4.1)

I have a grid with one editable cell in each row. When updating those editable fields I move the focus to the next enable field in the grid so that row will get selected.

The issue is, if the next focused field is not in the current viewport the browser(not chrome) itself scrolls that record to the viewport and user can see it. But this is not happening in Chrome (not scrolling the focused record to the viewport).

I create these editable cells using jqgrid custom formatter as I need different type of input fields to be created.

When the type is radio or a combo (select) chrome works fine, scrolls the focused element to the screen, but when the type is 'text' this is not happening in chrome. And I could not find any logical reason for this.

These are the fields created,

Radio:

<td role="gridcell" style="" aria-describedby="myGrid_editCol">
<span class="editable">
    <div class="customelement" id="36_editCol" name="editCol">
        <input id="36_editCol_id1" name="36_editCol_nm" type="radio" value="0"> No 
        <input id="36_editCol_id2" name="36_editCol_nm" type="radio" value="1" checked="checked"> Yes 
        <input id="36_editCol_id3" name="36_editCol_nm" type="radio" value="?"> Unknown     
    </div>
</span>

Text:

<td role="gridcell" style="" aria-describedby="myGrid_editCol">
<span class="editable">
    <div class="customelement" id="75_editCol" name="editCol">
        <input type="text" id="75_editCol_id" maxlength="10" value="sd">
    </div>
</span>

Answers


Finally I figured out the cause of this issue.

Actually it is not an issue with the jqgrid but it is Chrome.

The cause is: I'm using 'select()' and 'setSelectionRange()' function to position the cursor and to highlight the values. The input fields assigned with these function are the ones having the scrolling issue.

//to highlight...
$('#myFld').select();
.....
//to position the cursor..
this.setSelectionRange(begin, end);

Later I found this is listed as an issue in chrome here https://code.google.com/p/chromium/issues/detail?id=32865

The fix is: I changed my code with setTimeOut() method as this is the only available workaround for this issue mentioned in many other posts also.

//to highlight...
setTimeout(function() {$('#myFld').select();}, 10);
.....
//to position the cursor..
setTimeout(function() {this.setSelectionRange(begin, end);}, 10);

Thank you for all..


Need Your Help

How do i pass a mysql query result as a variable to be used in another query search?

php mysql html ajax database

Ok so basically I've got a product database. members search the database by clicking on categories of their choice.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.