PDA

View Full Version : Border CSS overridden in component



jclark42796
1 May 2012, 9:26 AM
In 4.0.7 the following could would render $123.45 with a double line on the bottom border. No border is rendered in 4.1.0. This seems due to the "border: false". Setting "border: true" will render a single line bottom border. Setting xtype to 'container' has no effect. For this to work, it needs to have a panel xtype, which seems more heavy weight than needed. BTW, I tried using 'cls' property, same effect as inline style.

Is there another way to style a lightweight component with the double bottom border?

Thanks,
Jim



Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'component',
html: '$123.45',
//cls: 'mycss',
style: 'height: 20px; border-bottom: 3px double black;',
border: false
}
]
});
}
});

scottmartin
1 May 2012, 1:54 PM
Please try the following:



.mycssbox {
border-bottom: 3px double red !important;
}

Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'component',
html: '$123.45',
cls: 'mycssbox',
border: false
}
]
});
}
});


Regards,
Scott.

jclark42796
2 May 2012, 7:16 AM
Thanks, the !important did the trick.