PDA

View Full Version : [CLOSED] Accordion doesn't increase its height and provide a vertical scroll bar when needed



colin.yates
4 Apr 2013, 1:25 AM
If the accordion has too many tabs to display then it breaks. The accordion height doesn't consider the minimum height of panels either leading to a very poor, and in some cases unusable accordion. The number of items needed to reach this state in the gray and blue theme was so high on reasonable desktops that it wasn't an issue, with the neptune theme however, I am running into this over and over.

The accordion should provide vertical scroll bars to ensure it is sufficient to display at least the height of each panel.

http://www.sencha.com/forum/showthread.php?260192-4.2-Setting-height-of-accordion&p=953299#post953299 contains details.

evant
4 Apr 2013, 1:32 AM
You need to specify autoScroll:



new Ext.panel.Panel({
renderTo: document.body,
title: 'Test',
height: 200,
width: 200,
layout: 'accordion',
autoScroll: true,
items: [{
title: 'One',
html: 'one'
}, {
title: 'Two',
html: 'two'
}, {
title: 'Three',
html: 'three'
}, {
title: 'Four',
html: 'four'
}, {
title: 'Five',
html: 'five'
}, {
title: 'Six',
html: 'six'
}, {
title: 'Seven',
html: 'Seven'
}, {
title: 'Eight',
html: 'eight'
}, {
title: 'Nine',
html: 'nine'
}, {
title: 'Ten',
html: 'ten'
}]
});


Marking as closed.

colin.yates
4 Apr 2013, 1:39 AM
That doesn't fix this bug. Where has item one gone? Try expanding item two and you see the contents of item one, but it still isn't sized properly. This bug is for the accordion to take into consideration the heights on the contents of the individual item bodies as well.



Ext.onReady(function () {
new Ext.panel.Panel({
renderTo: document.body,
title: 'Test',
height: 200,
width: 200,
layout: 'accordion',
autoScroll: true,
items: [{
title: 'One',
xtype: 'panel',
title: 'hi there',
layout: 'fit',
height: 400
}, {
title: 'Two',
html: 'two'
}, {
title: 'Three',
html: 'three'
}, {
title: 'Four',
html: 'four'
}, {
title: 'Five',
html: 'five'
}, {
title: 'Six',
html: 'six'
}, {
title: 'Seven',
html: 'Seven'
}, {
title: 'Eight',
html: 'eight'
}, {
title: 'Nine',
html: 'nine'
}, {
title: 'Ten',
html: 'ten'
}]
});
}); // eo onReady

colin.yates
4 Apr 2013, 1:59 AM
Ah, I see. a child's 'height' is overridden (I guess because the default layout is 'fit'?). Specifying minHeight works as expected.



Ext.onReady(function () {
new Ext.panel.Panel({
renderTo: document.body,
title: 'Test',
height: 200,
width: 200,
layout: 'accordion',
autoScroll: true,
items: [{
title: 'One',
html: 'one',
minHeight: 100
}, {
title: 'Two',
html: 'two',
minHeight: 300
}, {
title: 'Three',
html: 'three'
}, {
title: 'Four',
html: 'four'
}, {
title: 'Five',
html: 'five'
}, {
title: 'Six',
html: 'six'
}, {
title: 'Seven',
html: 'Seven'
}, {
title: 'Eight',
html: 'eight'
}, {
title: 'Nine',
html: 'nine'
}, {
title: 'Ten',
html: 'ten'
}]
});
}); // eo onReady




Thanks a bunch.

evant
4 Apr 2013, 2:11 AM
Not fit, but flex, so once you add up all the headers there's nothing left over to actual display the expanded one. minHeight is a good solution.