PDA

View Full Version : Accordion (1.1-beta2) width in Internet Explorer



Lester Burlap
30 Oct 2007, 6:43 AM
Hello:

I'm having a small problem with the visible width of the Ext.ux.Accordion (version 1.1-beta2) in Internet Explorer. The Accordion works perfectly in Firefox, but for some reason the width of the Accordion is exploding to 100% in IE6 (see screenshots below).

The Accordion is nested inside an Ext 1.1 BorderLayout + ContentPanel. We are generating the Accordion programmatically in Wicket:



StringBuffer sb = new StringBuffer();
sb.append( "var acc = new Ext.ux.Accordion('acc-ct', {fitHeight: true});\n" );
Iterator<Item> items = refreshingView.getItems();
while( items.hasNext() ){
sb.append("acc.add(new Ext.ux.InfoPanel('");
sb.append( items.next().getMarkupId() ); // this is the html id for the InfoPanel
sb.append("', {}));\n");
}


And this is our BorderLayout javascript (the accordion is added to the div with ID "west-div"):


init : function() {

var northPanelLayout = new Ext.BorderLayout(Ext.get('north-div'), {
west: {
collapsible: false,
split: false,
initialSize: 155,
minSize: 155,
maxSize: 155
},
center: {
collapsible: false,
split: false
}
});

northPanelLayout.beginUpdate();
northPanelLayout.add('west', new Ext.ContentPanel('logo-div', {
fitToFrame: true,
closable: false
}));
northPanelLayout.add('center', new Ext.ContentPanel('top-nav-div', {
fitToFrame: true,
closable: false
}));
northPanelLayout.endUpdate();

// Main layout.
var mainLayout = new Ext.BorderLayout(document.body, {
north: {
split: false,
initialSize: 33,
minSize: 33,
maxSize: 33,
titlebar: false,
collapsible: false
},
west: {
split: true,
titlebar: true,
autoScroll: true,
collapsible: true,
initialsize: 250
},
center: {
split: false,
autoScroll: true
}
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
fitToFrame: false
}));
mainLayout.add('west', new Ext.ContentPanel('west-div', {
fitToFrame: false,
autoScroll: true
}));
mainLayout.add('center', new Ext.ContentPanel('center-div', {
fitToFrame: true
}));

mainLayout.endUpdate();


Has anyone seen this behavior in IE before? Is there a configuration option for Accordion or InfoPanel I could set that would force a certain initial width? I've tried some obvious ones (width, etc), but nothing seems to work.

This is what we want (works fine in Firefox)
http://www.nathanbeach.com/temp/screenshots/screenShot_firefox.gif

Why is IE such a pain in the A$&#?
http://www.nathanbeach.com/temp/screenshots/screenShot_ie6.gif

Thanks for any help....

Sincerely,
Lester Burlap