View Full Version : [FIXED-954][3.0.3] EditorGrid bug - scrolled celleditor only partially visible

11 Dec 2009, 4:50 AM
Extjs Version: 3.0.3
Adapter: Ext
CSS: Ext-All.Css
Browsers Effected: IE7, IE8 (not tested in IE6)
OS: Win XP Pro

Hi All,

I am experiencing a bug in the Editor grid for columns which are initially on the right hand border of the grid's visible area.

Essentially when you try to edit a cell in the column in question the editor is only partially visible, with the right hand side being masked by a blue block. This does NOT always appear for all columns to the right. In the images attached you can see the 2nd from last column exhibits the problem, but the last column does not. This appears to be tied to the fact that that column is on the right hand border of the grid when it is initially rendered.

I am using ExtJs 3.0.3 and I am experiencing the problem in IE8, and IE7 but the issue does not occur in Firefox 3.5.5.

In the example shown the column in question has an associated date picker but the problem also occurs with a numerical field.

Does anyone have any ideas on how to address this?



11 Dec 2009, 7:39 AM
are you including a DOCTYPE?

could you post a test case as mentioned in 71015?

11 Dec 2009, 8:08 AM
Hi Mystix,

Thanks for your response.

Yes I am including a doctype as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> One thing I have noticed is that the obscuring blue block's size is directly related to the amount the column runs over the edge of the grid on initial load.

Unfortunately I don't have time to do a test case today but I will try and put one together early next week.



13 Dec 2009, 7:33 PM
As suggested by Marc, it's difficult to start without seeing a test case.

12 May 2010, 5:27 AM
Posting this here since it is still in INFOREQ status and i have the same issue:

Ext version tested:

Ext 3.2.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:


Operating System:

WinXP Pro


As describe per the first post. If an EditorGridPanel's with horizontal scrolling where the grid load with a scrollbar due to column widths, any (usually exactly 1, in practice) column that is partially visible initially (and only initially) will experience a bug when editing, where the editor only partially shows. Looking at it with the IE Dev Toolbar, the textfield/textarea/whatever is actually of the correct size, but one of the divs that contain it does not resize properly (and since overflow:hidden, the textfield ends up being partially hidden)

Test Case:

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';

var sampleData = { root: [
{id: 1, Column1: 'Column1A', Column2: 'Column2A', Column3: 'Column3A', Column4: 'Column4A'},
{id: 2, Column1: 'Column1B', Column2: 'Column2B', Column3: 'Column3B', Column4: 'Column4B'},
{id: 3, Column1: 'Column1C', Column2: 'Column2C', Column3: 'Column3C', Column4: 'Column4C'},
{id: 4, Column1: 'Column1D', Column2: 'Column2D', Column3: 'Column3D', Column4: 'Column4D'},
{id: 5, Column1: 'Column1E', Column2: 'Column2E', Column3: 'Column3E', Column4: 'Column4E'},
{id: 6, Column1: 'Column1F', Column2: 'Column2F', Column3: 'Column3F', Column4: 'Column4F'},
{id: 7, Column1: 'Column1G', Column2: 'Column2G', Column3: 'Column3G', Column4: 'Column4G'},
{id: 8, Column1: 'Column1H', Column2: 'Column2H', Column3: 'Column3H', Column4: 'Column4H'},
{id: 9, Column1: 'Column1I', Column2: 'Column2I', Column3: 'Column3I', Column4: 'Column4I'}

var sampleStore = new Ext.data.JsonStore({
root: 'root',
idProperty: 'id',
fields: [
{name: 'Column1'},
{name: 'Column2'},
{name: 'Column3'},
{name: 'Column4'}


scrollingGrid = new Ext.grid.EditorGridPanel({
store: sampleStore,
frame: true,
width: 700,
height: 500,
columns: [
xtype: 'gridcolumn',
header: 'Column1',
width: 300,
dataIndex: 'Column1',
editor: {
xtype: 'textarea'
xtype: 'gridcolumn',
header: 'Column2',
width: 300,
dataIndex: 'Column2',
editor: {
xtype: 'textarea'
xtype: 'gridcolumn',
header: 'Column3',
width: 300,
dataIndex: 'Column3',
editor: {
xtype: 'textarea'
xtype: 'gridcolumn',
header: 'Column4',
width: 300,
dataIndex: 'Column4',
editor: {
xtype: 'textarea'

Ext.onReady(function() {
var viewport = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: 'absolute',
items: [scrollingGrid]

Steps to reproduce the problem:

Use the code above in IE7 (the original post states this issue is present in IE8 too, but I do not have access
to IE6/8 currently. I wouldn't be surprised if it wasn't isolated to IE7, but the bug is NOT present in Firefox/Chrome
Double click in column 3 (the right-most visible column when loading the above code) to start editing
Notice that the editor is only partially shown, as per the screenshots provided in the original post.

The result that was expected:

The editor should be fully visible, as it will be in any other column that is fully visible or fully hidden when the grid load (such as Column1, Column2 and Column4 if using the code I posted)

The result that occurs instead:

Column3's editor is partially hidden

Screenshot or Video:

Debugging already done:

I looked with the IE Dev toolbar and can see that the editor itself is sized properly. It is just partly hidden, probably (I'm no expert) because its container div is not properly resized

Possible fix:

not provided

12 May 2010, 6:55 AM
Additional detail:

this bug does NOT happen when in quirk mode. If i provide a valid XHTML 1.0 transitional doctype, then it happens. Of course, in quirk mode a bunch of other things break, so it isn't a very good workaround for me :)

13 May 2010, 9:04 AM
Confirmed for only IE7 strict mode. Works as expected in quirks for all and strict in IE6/8.

20 May 2010, 4:18 AM
This has been fixed in SVN, rev 6634.