Question

I have created a FormPanel with a TabPanel with several tabs. The background color of the tabs are default white, but I would like them all to have the theme (default blueish) color normally present in a Panel.

I have tried adding

bodyStyle: ‘background-color: transparent !important’

to the form, tabpanel and tabs, and it works in IE9 and Chrome, but not in FireFox?

How come transparent as a pseudo color-value is discarded in FireFox?

---

JavaScript:

var form = new Ext.form.FormPanel({
    border: false,
    bodyStyle: 'background-color: transparent !important',            
    layout: 'fit',
    items: [
    {
        xtype: 'tabpanel',
        activeTab: 0,
        bodyStyle: 'background-color: transparent !important',
        deferredRender: false,
        defaults: {
            bodyStyle: 'padding: 4px; background-color: transparent !important',
            layout: 'form',
            autoScroll: true
        },
        items: [
        {
            title: 'Tab 1',
            items: [
                ...
            ]
        }, {
            title: 'Tab 2',
            items: [
                ...
            ]
        }]
    }]
});

Answer 1

Why not use background:none instead?

bodyStyle: 'background: none'

Check out the demo: http://jsfiddle.net/chaoszcat/ug7Qg/.

By the way, it looks like FormPanel doesn’t have blueish background. Its background is defaulted to white.