PDA

View Full Version : [FIXED] [4.1PR][IE7,IE9] Space between Grid View and scrollbars are off.



SMMJ_Dev
3 Nov 2011, 10:25 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.1 rev PR
Browser versions tested against:

Chrome
IE7
IE8
IE9
FF8
DOCTYPE tested against:

_<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Description:

In IE9, when you have a grid with enough items to need a scrollbar, there is too much spacing between the last column and the scrollbar. I have the grid set to forceFit (or you can have a flex column)
Also, in IE7, there is a horizontal scrollbar that stays on until you perform a sort.
Steps to reproduce the problem:

Create Grid with forceFit set to true (or you can have a flex column).
Load with store w/ enough data to cause a scrollbar.
View in IE7 & IE9 browsers.
The result that was expected:

The space between the last column and the vertical scrollbar should line up next to each other as in IE8 with a grid that has forceFit set to true (or a flex column).
Their shouldn't be a horizontal scrollbar w/ forceFit set to true on the grid.
The result that occurs instead:

In IE9, there is too much space between the last column and the vertical scrollbar.
In IE7, it looks like there is not enough space which might be causing the horizontal scrollbar to appear. There shouldn't be a horizontal scrollbar.
Test Case:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" },{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});



HELPFUL INFORMATION


Screenshot or Video:

attached
IE 9:29010
IE 7:29011

See this URL for live test case: (Wherever the examples are for Ext 4.1PR, look at a grid w/ a scrollbar)

Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

Windows 7

mitchellsimoens
17 Nov 2011, 1:21 PM
Thank you for the report!

arielalvarez88
16 Mar 2016, 12:34 PM
I have 4.2.1 and it this is still happening :(