Question

当子元素的高度大于其父元素的“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" />'
    }]
});

如果不清楚，请不要犹豫，问我。我会试着更详细地解释一下这个不清楚的事情。

非常感谢您的支持！

Answer 1

好的我从未使用过ExjJS所以我不熟悉使用的JS包装器......我在做类似的事情时遇到的一个奇怪的缺点是CSS和溢出。

尝试在容器div的CSS中设置以下内容。

height: auto;
overflow: hidden;

奇怪的是，将容器的高度缩放到最高子元素的高度......即使孩子们浮动也是如此。

调整容器的高度

1 个答案: