CODEWITHSUNDEEP
extjs
Oliver Watkins
Oliver Watkins

Reputation: 13529

Extjs Margin/Padding on label exposes gray area

If I use Border layout and add a label to one of the regions, I then want to add some spacing around it so that it is not pushed up against the border. However no matter what I use (margin or padding) it always exposes some ugly gray/blue areas :

enter image description here

I do not expect this, because the label is sitting on a panel. I don't understand how transparancy comes into the equation.

I am simply adding my label like this :

var createPanel = Ext.create('Ext.panel.Panel', {

    border: false,
    region: 'center',

    layout: {
        type: 'border',
        pack: 'start'
    },
    items: [
        {
            xtype: 'panel',

            border: false,
            region: 'center',
            text: 'Create New With Selected Packets',
            items: {
                margin: 30, //or padding!!!!
                xtype: 'label',

                text: 'Create New With Selected Packets'
            }
        },
        {

            xtype: 'panel',
            border: false,
            region: 'east',
            items: {
                xtype: 'button',
                margin: '5 5 5 5',
                text: 'Create New '

            }
        }
    ]
});

jsfiddle here

Upvotes: 0

Views: 1313

Answers (1)

CD..
CD..

Reputation: 74176

You can wrap the label with a container, like: 

{
        xtype: 'panel',
        border: false,
        region: 'center',
        text: 'Create New With Selected Packets',
        items: {
            xtype: 'container',
            padding: 30,
            items: {
                xtype: 'label',
                text: 'Create New With Selected Packets'
            }
        }
    }

Working example: http://jsfiddle.net/vc8L43Lw/

Upvotes: 1

Related Questions