Guriddo » Topic: Autowidth/Autoheight and IE problems

Autowidth/Autoheight and IE problems

Guriddo
Autowidth/Autoheight and IE problems

This topic has 10 replies, 5 voices, and was last updated 16 years ago by jmav.

Creator

Topic
July 22, 2009 at 4:20 am #73727

Romyn
Participant

Hi again ,

I have a setup that has 2 grids within an Accordian that is inside a UI-Layout pane – I've left all that in just in case it's relevant in any way – I have a couple of problems that show up within IE (6&7).

The first can be seen on the following page:-

http://www.thekmz.co.uk/GEPlugin/wip/test/gridtest3/gridtest3a.htm

The grids are set to autowidth:true and height:'auto'.

(Having 2 grids means I can't use height:'100%' as that throw the 2nd grid down the page and gives a vertical scroll)

When the Layout-Pane is resized (by dragging the grey vertical bar) the Accordian is resized and so are the grids (using setGridWidth to 5px less than the accordian's outerwidth). This works as expected in FF but in IE making the Pane larger (drag left) the Grids increase in width OK but if I then make it smaller the Grids don't resize and I get a horiz scroll even if the columns should fit.

(I also get a vertical scroll in IE when initially loading the page which I can't seem to be able to get rid of – I can't see a reason why that is there – it's not in FF but may not be due to jqGrid – I don't know?)

The second problem is related to height:auto and can be seen on this page:-

http://www.thekmz.co.uk/GEPlugin/wip/test/gridtest3/gridtest3b.htm

This setup is exactly the same as the first but in this one I've made the final column in the first grid wider so that it will give a horiz scroll when initially loaded. In FF it's looks fine and the autoheight works and I can see all the records. In IE however I not only get a horiz scroll but also a vertical one and all the records are not visible. I don't know if this is related in any way to problem 1 but I can't figure out a way to solve it without (maybe) setting and recalculating the height in code.

I've searched the forum, promise, as much as I can but can't seem to find a fix so any help would be greatly appreciated.

(I'm using 3.5 build 11)

Thanks and regards

Romyn
Creator

Topic

Viewing 10 replies - 1 through 10 (of 10 total)

Author

Replies
July 27, 2009 at 3:01 am #87802

tony
Keymaster

Hello,

For the first issue – it is a not jqGrid problem, but a way how diffrent browsers calculate the width – in this case IE.

Maybe you should try not with width(), but with innerWidth().

function resizeGridWidths() {

July 28, 2009 at 8:58 pm #87857

Romyn
Participant

Thanks for the reply Tony.

You're right – issue 1 does seem to be a problem with either the UI-Accordion or the UI-Layout control – got to work out which now. I did try you're suggestion vis-a-vis width instead of innerwidth but it made no difference unfortunately. I've added an Alert in that gives the width when the pane is resized and it appears that with IE the width just decreases by 1px no matter how much the pane size is decreased by (FF shows the correct value in the alert). Increasing the width is fine in both. That's a clue at least.

As for the 2nd issue – I've tried build 12 and now have loaded the latest from GitHub behind it but it still does the same thing – not showing all records in IE even though set to autoheight. It seems as though IE doesn't take into account the horiz scrollbar although FF does.

Any ideas?

July 29, 2009 at 1:20 am #87860

tony
Keymaster

Hello,

For the second. Could not remember, but I think there was a patch here in forum for this issue. Will try to find it – the correction is in css.

Regards

Tony

July 29, 2009 at 10:11 am #87873

Romyn
Participant

Thanks – that would be useful. I've tried searching for it but can't find it using what I thought were obvious search terms.

(The 1st one I've now posted on the jQuery-UI googlegroup – hopefully someone will come to my rescue over there).

Regards

Romyn

July 30, 2009 at 4:10 am #87867

tony
Keymaster

Hello,

Could you please look this:

jqGrid 3.5 beta

and let me known if this resolve the problem.

Also here is the message:

…

For those of you having problems when you only have one row, and the scrollbars appear on Internet Explorer, here is a quick hack… just add it on some function (like updatepager() on grid.base.js

if ($.browser.msie) {
$a = $(’.ui-jqgrid .ui-jqgrid-bdiv’);
$a.css(’padding’, ‘0 0 15px 0′);
if(ts.p.height == ‘100%’){
$a.css(’overflow-y’, ‘hidden’);
}
}

…

Regards

Tony

July 31, 2009 at 3:32 am #87886

hpoe
Participant

tony said:

Hello,

Could you please look this:

http://www.trirand.com/blog/?p…..mment-3198

and let me known if this resolve the problem.

Also here is the message:

…

For those of you having problems when you only have one row, and the scrollbars appear on Internet Explorer, here is a quick hack… just add it on some function (like updatepager() on grid.base.js

if ($.browser.msie) {
$a = $(’.ui-jqgrid .ui-jqgrid-bdiv’);
$a.css(’padding’, ‘0 0 15px 0′);
if(ts.p.height == ‘100%’){
$a.css(’overflow-y’, ‘hidden’);
}
}

…

Regards

Tony

Hello Tony,

after the code line 1094 original:

July 31, 2009 at 8:27 am #87887

Romyn
Participant

Thanks for digging that out Tony,

For now I've added

August 4, 2009 at 2:06 am #87925

tony
Keymaster

Hello Romyn,

Not sure If I include this fix. It works ok when you have shrinkToFit set to false, but when this parameter is set to true we have a empty space bettwen the last row and the pager, which does not look good. I will publish this solution in HOWTO section of the grid, but will try to search a better one.

Regards

Tony

October 6, 2009 at 10:18 am #89552

admin
Keymaster

tony said:

Hello Romyn,

Not sure If I include this fix. It works ok when you have shrinkToFit set to false, but when this parameter is set to true we have a empty space bettwen the last row and the pager, which does not look good. I will publish this solution in HOWTO section of the grid, but will try to search a better one.

Regards

Tony

Well, something I did to tweak this was to also only apply this fix for IE7 and lower, IE8 has this issue fixed.

/* ie browser fix */

if ($.browser.msie && $.browser.version<8) {

$a = $('.ui-jqgrid .ui-jqgrid-bdiv');

$a.css('padding', '0 0 15px 0');

if(ts.p.height == '100%'){

$a.css('overflow-y', 'hidden');

}

}

/* end ie browser fix */

October 22, 2009 at 4:15 pm #89950

jmav
Participant

Forum
Author

Replies