How do I change the panel height of a parent container to match the child content?

Question

I'm having trouble using different panel heights for content within a card layout. Most of the content fits within the height I specified for the container panel but there is one that is twice as long as the rest and I'm not sure how to get that panel to expand naturally. I realize the size can be set dynamically but I would think there is a simpler way since the panels end up being div's in the dom. Here's the code for the panel that needs to be resized and it's container:

    var platform = viewport.platform =  new Ext.Panel ({
                cls: 'page',
        height: 600,
        items: [
        {
            html: "<h1>Platform Dev</h1><h2>Application Deployment I: iPhone and iPad</h2><p>The Application Deployment I: iPhone and iPad Course requires students to create and deploy an application to an iOS device by building upon concepts introduced in the Mobile Frameworks and Objective C courses. Upon successful completion of the OS Application course, students will produce an interactive application that can be deployed on Apple¹s iOS devices.</p><h2>Application Deployment II: Android</h2><p>The Application Deployment II: Android Course requires students to create and deploy an application to an Android powered device. Students build upon concepts introduced in the previous programming courses and work through the processes involved by researching and implementing project management techniques."
        },
        {
                    xtype    : 'carousel',
                    ui       : 'light',
                    direction: 'horizontal',
                    height: 150,
                    items: [
                    {
                            html: 'infographic 1',
                            cls : 'infographic1'
                        },
                        {
                            html: 'Card #2',
                            cls : 'infographic2'
                        },
                        {
                            html: 'Card #3',
                            cls : 'infographic3'
                        },
                        {
                            html: 'Card #3',
                            cls : 'infographic4'
                        }
                    ]
                }
        ],
        layout: {
                    type: "vbox", 
                    align: "stretch" 
                },
      //  scroll: 'vertical'
    });


    mainContent = viewport.mainContent = new Ext.Panel ({ 
        id: "main_content",
        layout: "card",
        height: 220,
        items: [introText, mobileDev, games, utilities, platform, newContact],
        cls: "content",
        cardSwitchAnimation : "slide",
    });

chrixian chrixian · Accepted Answer · 2011-08-25T03:18:02

Card's take up all the available room so rather than 'resize' I assume you mean you want to be able to scroll down to see the rest of panel when it's too long, yea? If so add scroll: 'vertical' to your panel.. you can either add it to the viewport panel and let any panel that needs to scroll be scrollable or you can add it to a specific panel that's displayed as a card

new Ext.Panel ({
  scroll: 'vertical',
  ...
});

How do I change the panel height of a parent container to match the child content?

1 Answers