CLOSED: Accordion panel not growing to match parent panel

[jasondeegan]

How can I make the accordion panel (of id = dailyCharts-id) grow to fit the whole panel that sits inside the viewport. As shown in the attached screenshot, the Viewport part is working just fine. The accordion isn't growing to match, I've tried autoHeight in various places.

Unfortunately, I don't know the height, so I can't just hard code it.

Thanks!
J

[attached screenshot]

var contactsPanel = {
   id:'contacts-panel',
   layout:'border',
   bodyBorder: false,
   bodyStyle : 'background:#DFE8F6;',
   defaults: {
      bodyStyle : 'background:#DFE8F6;',
      split: true,
      animFloat: false,
      autoHide: false,
      useSplitTips: true
   },
   items: [{
      layout:'border',
      region:'center',
      margins: '0 0 0 0',
      collapsible: false,
      ctCls: 'teledini',
      items: [{
         region: 'south',
         height: 350,
         bodyStyle: 'background:#DFE8F6; border-bottom:solid #777777 1px;',
         items:[{
            layout: 'accordion',
            layoutConfig: {
               //animate: true,
               fill:false
            },
            defaults:{
               bodyStyle: 'padding:15px; height:247px; border-left:solid #777777 1px; border-right:solid #777777 1px;',
               autoScroll:true
            },
            items:[{
               title: 'Panel 1',
               id: 'Panel 1',
               hideCollapseTool: true,
               html: 'Content1<br><br>aaa'
            },{
               title: 'Panel 2',
               id: 'panel2',
               html: 'Content 2<br><br><br><br><br><br><br><br><br><br><br><br><br>test<br><br><br><br>test<br><br><br><br>test<br><br><br><br>test2'
            },{
               title: 'Panel 3',
               id: 'panel3',
               html: 'Content 3<br><br><br><br><br><br><br><br><br><br><br><br><br>test'
            }]
         }]
      },{
         title: 'Contact Detail',
         region:'center',
         margins: '0 0 5 0',
         bodyStyle: 'border:solid #777777 1px; border-top:0; padding:2px;',
         html:'Contact Detail'
      }]
   },{
      layout:'border',
      region:'east',
      floatable: false,
      collapsible: false,
      ctCls: 'teledini',
      width:'300',
      margins: '0 0 0 0',
      items: [{
         title: 'Today\'s Reservations',
         height:200,
         region: 'south',
         bodyStyle: 'border:solid #777777 1px; border-top:0; padding:2px;',
         html: '4'
      },{
         id:'dailyCharts-id',
         title: 'Daily Charts',
         region:'center',
         margins: '0 0 5 0',
         //autoHeight:true,
         items:[{
            layout: 'accordion',
            layoutConfig: {
               //animate: true,
               autoHeight:true,
               fill:true
            },
            defaults:{
               bodyStyle: 'padding:15px; border-left:solid #777777 1px; border-right:solid #777777 1px;',
               autoScroll:true
            },
            items:[{
               title: 'Panel 1',
               id: 'contactsSidePanel1',
               hideCollapseTool: true,
               html: 'Content1<br><br>aaa'
            },{
               title: 'Panel 2',
               id: 'contactsSidePanel2',
               html: 'Content 2<br><br><br><br><br><br><br><br><br><br><br><br><br>test<br><br><br><br>test<br><br><br><br>test<br><br><br><br>test2'
            },{
               title: 'Panel 3',
               id: 'contactsSidePanel3',
               html: 'Content 3<br><br><br><br><br><br><br><br><br><br><br><br><br>test'
            },{
               title: 'Panel 4',
               id: 'contactsSidePanel4',
               html: 'Content 4<br><br><br><br><br><br><br><br><br><br><br><br><br>test'
            }]
         }]
      }]
   }]
};

[jasondeegan]

I havne't tested it yet, but I read elsewhere (moved on to another project), the answer here is too much nesting. The accordion needs to be the child, not a child of a child.

J

[Animal]

Overnest.

You are putting an accordoin layout Panel inside the center Panel.

Use the accordion layout Panel as the center.