[CLOSED] 0.97 - TabPanel inside an overlay Panel issue

[AndreaCammarata]

Hi guys,
I'm prototyping my application and I've got a tabpanel rendering issue.
Check out the attached image.
The TabPanel is not set as sullscreen and is placed inside an overlay panel.

       this.fileViewTabPanel = new Ext.TabPanel({
            type: 'dark',
            animation: 'flip',
            items: [{
                title: 'Preview'
            },{
                title: 'Details'
            }]
        })
    
        this.fileView = new Ext.Panel({
            floating: true,
            modal: true,
            centered: false,
            width: Ext.is.Phone ? 260 : 640,
            height: Ext.is.Phone ? 220 : 480,
            scroll: 'vertical',
            dockedItems: [this.fileViewTabPanel]
        }); 

Am I missing something or is it a bug?
Thanks

[israelidanny]

I've got the same issue under 0.97. I'll try to get a fix done myself today, any official word?

[israelidanny]

Ok, so first of all, you have a little thing to fix in your code.

for the TabPanel, you need to specify:
dock: 'top'

this.fileViewTabPanel = new Ext.TabPanel({
            type: 'dark',
            dock: 'top',
            animation: 'flip',
            items: [{
                title: 'Preview'
            },{
                title: 'Details'
            }]
        })
    
        this.fileView = new Ext.Panel({
            floating: true,
            modal: true,
            centered: false,
            width: Ext.is.Phone ? 260 : 640,
            height: Ext.is.Phone ? 220 : 480,
            scroll: 'vertical',
            dockedItems: [this.fileViewTabPanel]
        });

Then, there's the white background. It seems like a bug in the Sencha css files. Right now they set any panel-body inside an overlay to a white background. However, a tab also has a panel body, so it becomes white and ugly.

I fixed it for myself by adding this little CSS fix for now:

.x-floating .x-tabbar .x-panel-body{
	background-color: transparent;
}

Add this in a separate external CSS, or at the top of your html file, whatever works for you. This will make sure that tabbars in overlays won't get the annoying white background.

Hope it helps you!

[AndreaCammarata]

Hi israelidanny, i follow your suggest and now it perfectly works!
I added the style hack to an external css waiting for sencha team fix it in the next releases.
Thanks a lot!

[israelidanny]

You're welcome! Glad I could be of assistance.

[sroepnac]

Exactly what I needed. Thank you.

Ok, so first of all, you have a little thing to fix in your code.

for the TabPanel, you need to specify:
dock: 'top'

this.fileViewTabPanel = new Ext.TabPanel({
            type: 'dark',
            dock: 'top',
            animation: 'flip',
            items: [{
                title: 'Preview'
            },{
                title: 'Details'
            }]
        })
    
        this.fileView = new Ext.Panel({
            floating: true,
            modal: true,
            centered: false,
            width: Ext.is.Phone ? 260 : 640,
            height: Ext.is.Phone ? 220 : 480,
            scroll: 'vertical',
            dockedItems: [this.fileViewTabPanel]
        });

Then, there's the white background. It seems like a bug in the Sencha css files. Right now they set any panel-body inside an overlay to a white background. However, a tab also has a panel body, so it becomes white and ugly.

I fixed it for myself by adding this little CSS fix for now:

.x-floating .x-tabbar .x-panel-body{
    background-color: transparent;
}

Add this in a separate external CSS, or at the top of your html file, whatever works for you. This will make sure that tabbars in overlays won't get the annoying white background.

Hope it helps you!

[caiken]

Thanks, this fixes it and works like a champ!

Ok, so first of all, you have a little thing to fix in your code.

for the TabPanel, you need to specify:
dock: 'top'

this.fileViewTabPanel = new Ext.TabPanel({
            type: 'dark',
            dock: 'top',
            animation: 'flip',
            items: [{
                title: 'Preview'
            },{
                title: 'Details'
            }]
        })
    
        this.fileView = new Ext.Panel({
            floating: true,
            modal: true,
            centered: false,
            width: Ext.is.Phone ? 260 : 640,
            height: Ext.is.Phone ? 220 : 480,
            scroll: 'vertical',
            dockedItems: [this.fileViewTabPanel]
        });

Then, there's the white background. It seems like a bug in the Sencha css files. Right now they set any panel-body inside an overlay to a white background. However, a tab also has a panel body, so it becomes white and ugly.

I fixed it for myself by adding this little CSS fix for now:

.x-floating .x-tabbar .x-panel-body{
    background-color: transparent;
}

Add this in a separate external CSS, or at the top of your html file, whatever works for you. This will make sure that tabbars in overlays won't get the annoying white background.

Hope it helps you!

[anhvule]

You saved my day. Thanks for your help.