調整容器高度

當兒童元素的高度大於其父元素的配置「minHeight」時，我怎樣才能實現我的容器將相應調整子項目的高度？目前包含文本的div的內容將被切斷。請看看我的代碼。調整容器高度

con_notification = Ext.create('Ext.container.Container', { 
    id: 'con_notification', 
    border: true, 
    layout: { 
     type:'vbox', 
     align: 'center' 
    }, 
    style: { 
     zIndex: '999999' 
    }, 
    renderTo: Ext.getBody() 
}); 
con_notification.add(Ext.create('rmt.view.NotificationContainer')); 
con_notification.hide(); 
con_notification_box = Ext.getCmp('con_notification-box'); 

con_notification_box.getEl().setStyle(con_notification_box_success); 
con_notification_box.items.items[0].update('<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>'); 
con_notification_box.doLayout(); 
con_notification.getEl().slideIn('t', { 
    easing: 'easeOut', 
    duration: 1000 
}); 

Ext.getCmp('con_application-close').getEl().on('click',function(){ 
    con_notification.getEl().slideOut('t', { duration: 1000 }); 
});

rmt.view.NotificatonContainer：

Ext.define('rmt.view.NotificationContainer', { 
    extend: 'Ext.container.Container', 
    id: 'con_notification-box', 
    border: true, 
    width: 500, 
    minHeight: 75, 
     style: { 
     border: '1px solid', 
     borderRadius: '3px', 
     padding: '15px 25px 10px 50px', 
     backgroundRepeat: 'no-repeat', 
     backgroundPosition: '10px 4px', 
     color: '#444', 
     boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255,255,255,0.4) inset', 
     wordBreak: 'break-all', 
     wordWrap: 'break-word', 
     backgroundColor: '#cfe6fc', 
     backgroundImage: 'url(assets/info.png)', 
     borderColor: '#a4c8f5', 
     zIndex: 99999 
    }, 
    items:[{ 
     xtype: 'container', 
     html: '<p>Insert your information text here.</p>' 
    },{ 
     xtype: 'container', 
     id: 'con_application-close', 
     cls: 'notification-close', 
     html: '<img src="assets/close.png" />' 
    }] 
});

如果事情不清楚，不要猶豫，問我。我會試着更詳細地向你解釋不清楚的事情。

非常感謝您的支持！

來源

2012-03-30 shub

OK我從來沒有使用ExjJS，所以我不熟悉JS包裝器使用但是...當我做類似的事情時，我遇到了一個奇怪的弱點與CSS和溢出。

試着簡單地在CSS中設置以下容器div。

height: auto; 
overflow: hidden;

這將，古怪，縮放容器的高度最高的子元素的高度......即使孩子們浮動。

來源

2012-03-30 14:58:35 CD001

調整容器高度

回答

相關問題