컨테이너의 높이 조절

어린이 요소의 높이가 더 크고 부모 요소의 "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

좋아요. 사용 된 JS 래퍼에 익숙하지 않아서 ExjJS를 사용한 적이 없지만 비슷한 일을 할 때 발생했던 이상한 표현이 CSS와 오버플로입니다.

컨테이너 div의 CSS에서 다음을 설정하기 만하면됩니다. , 이상하게, 아이들이 떠 경우에도 가장 높은 자식 요소의 높이 ...에 컨테이너의 높이를 확장 할 수

height: auto; 
overflow: hidden;

출처

2012-03-30 14:58:35 CD001

컨테이너의 높이 조절

답변

관련 문제