Как изменить высоту панели родительского контейнера в соответствии с дочерним содержимым? - PullRequest
Новая
       18

Как изменить высоту панели родительского контейнера в соответствии с дочерним содержимым?

1 голос
/ 24 августа 2011

У меня проблемы с использованием разных высот панели для содержимого в макете карты.Большая часть содержимого вписывается в высоту, указанную мною для панели контейнера, но есть та, которая в два раза длиннее остальных, и я не уверен, как заставить эту панель естественным образом расширяться.Я понимаю, что размер может быть установлен динамически, но я думаю, что есть более простой способ, так как панели в конечном итоге становятся div'ами в dom.Вот код панели, размер которой необходимо изменить, и ее контейнера: 

    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",
    });

1 Ответ

1 голос
/ 25 августа 2011

Карты занимают всю доступную комнату, поэтому вместо «изменения размера» я предполагаю, что вы имеете в виду, что хотите прокрутить вниз, чтобы увидеть оставшуюся часть панели, когда она слишком длинная, да?Если это так, добавьте scroll: 'vertical' на панель. Вы можете добавить ее на панель просмотра и позволить прокручивать любую панель, которую нужно прокрутить, или добавить ее на определенную панель, которая отображается в виде карточки 

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