tabpanel not showing the items unless a height is specified

[mattgolding]

I have a tabpanel inside a container which is showing the tabpanels toolbar on the bottom of the screen just fine. The problem I have is the panels/items for the tabpanels are not showing on the screen. I was hoping to have these panels/items fill the screen however the only way I can get them to appear is if I specify a height for the tabpanel. Then the items/panels apear and switch in and out like normal when clicking on the buttons in the tabpanels toolbar. Could someone please let me know what I have wrong in my code that is not enabling the items contents to appear on the screen.

 Ext.define("GS.view.DetailContainer", {
extend: 'Ext.Container',    
alias: 'widget.detail-container',     
requires: [        
'Ext.Toolbar',        
'Ext.tab.Panel'    
],     
config: {        
items: [{                
xtype: 'tabpanel',                                
docked: 'bottom',                
tabBarPosition: 'bottom',                 


defaults: {
styleHtmlContent: true                
},                 


items: [
{                        
title: 'Home',                        
iconCls: 'home',                        
html: 'Home Screen'                    
},                    
{                       
title: 'Contact',                        
iconCls: 'user',                        
html: 'Contact Screen'                    
}                
]            
}]    
}
});

[jerome76]

Give your Container a layout: 'fit'

[mattgolding]

Give your Container a layout: 'fit'

No good Jerome. They still dont appear.

[jerome76]

Oh. It is because you are docking your tabPanel to the bottom of the container. Remove that line and it will show.

[mattgolding]

I solved the issue. The layout: 'fit' was needed but I also needed to drop the docked: 'bottom' on the tabPanel.

My new code looks like this

Ext.define("GS.view.DetailContainer", {
extend: 'Ext.Container', 
   alias: 'widget.detail-container', 

    requires: [        
'Ext.Toolbar', 
       'Ext.tab.Panel'    
],
layout: 'fit',

config: {        
items: [{
xtype: 'tabpanel', 
                               tabBarPosition: 'bottom', 
                defaults: {
styleHtmlContent: true
}, 
                items: [
{                        
title: 'Home', 
                       iconCls: 'home', 
                       html: 'Home Screen'                    
},                    {                       
title: 'Contact', 
                       iconCls: 'user', 
                       html: 'Contact Screen'                    
}                
]            
}]    
}
});

[mattgolding]

Oh. It is because you are docking your tabPanel to the bottom of the container. Remove that line and it will show.

Yes it is (sorry didn't see your post when I posted my code)

[jerome76]

Sorry I would have posted sooner but I was leaving work