PDA

View Full Version : How can I change the margin color?



Elfayer
26 Jul 2012, 4:20 AM
Hi,

I would like to change the color of the margin, because here it's white :

37507

It's to have a space between buttons.

Thanks in advance !

friend
26 Jul 2012, 4:34 AM
I think you all you need to do is set the background color of the parent container. Can you post a code snippet which includes the parent container?

If the parent container is a toolbar, you can do a simple style override to change the background color:



{
xtype: 'toolbar',
dock: 'top',
style: {
background: 'red'
},
<...>
}

Elfayer
26 Jul 2012, 4:41 AM
That's not changing the margin color, the margin comes from the button :


Ext.define('DSK.view.desktopSouth.ButtonTaskbar', {
extend: 'Ext.button.Button',
alias: 'widget.buttonTaskbar',

margin: '0 2 0 0'
})

friend
26 Jul 2012, 4:59 AM
The problem may have something to do with the parent container which houses the buttons or a CSS issue.

Note that this works as expected for me, where I set an orange background to make things stand out:



Ext.create('Ext.window.Window', {
height: 300,
layout: 'fit',
title: 'Buttons with Margins',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
style: {
background: 'orange'
},
items: [{
text: 'Button 1',
margin: '0 20 0 0'
},{
text: 'Button 2',
margin: '0 20 0 0'
}]
}],
width: 300
}).show();

Elfayer
26 Jul 2012, 5:17 AM
In fact the buttons are on a panel who is on the taskbar :



Ext.define('DSK.view.desktopSouth.Taskbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.taskbar',

region: 'south',
items: {
xtype: 'panel',
border: false,
itemId: 'panelButton'
}
})

friend
26 Jul 2012, 6:47 AM
As a fairly simple test, try adding the buttons directly to the toolbar, without using a child panel. This will at least let you know if the child panel is the culprit.