Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default [CLOSED] 0.97 - TabPanel inside an overlay Panel issue

    [CLOSED] 0.97 - TabPanel inside an overlay Panel issue


    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.

    PHP Code:
           this.fileViewTabPanel = new Ext.TabPanel({
                
    type'dark',
                
    animation'flip',
                
    items: [{
                    
    title'Preview'
                
    },{
                    
    title'Details'
                
    }]
            })
        
            
    this.fileView = new Ext.Panel({
                
    floatingtrue,
                
    modaltrue,
                
    centeredfalse,
                
    widthExt.is.Phone 260 640,
                
    heightExt.is.Phone 220 480,
                
    scroll'vertical',
                
    dockedItems: [this.fileViewTabPanel]
            }); 
    Am I missing something or is it a bug?
    Thanks
    Attached Images
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  2. #2
    Sencha User israelidanny's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    israelidanny is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User israelidanny's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    israelidanny is on a distinguished road

      0  

    Default


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

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

    Code:
    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:
    Code:
    .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!

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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!
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  5. #5
    Sencha User israelidanny's Avatar
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    israelidanny is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    sroepnac is on a distinguished road

      0  

    Default Thanks!

    Thanks!


    Exactly what I needed. Thank you.

    Quote Originally Posted by israelidanny View Post
    Ok, so first of all, you have a little thing to fix in your code.

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

    Code:
    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:
    Code:
    .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!

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    8
    Vote Rating
    0
    caiken is on a distinguished road

      0  

    Thumbs up Works like a champ!

    Works like a champ!


    Thanks, this fixes it and works like a champ!

    Quote Originally Posted by israelidanny View Post
    Ok, so first of all, you have a little thing to fix in your code.

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

    Code:
    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:
    Code:
    .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!

  8. #8
    Sencha User
    Join Date
    Jun 2014
    Posts
    4
    Vote Rating
    0
    anhvule is on a distinguished road

      0  

    Default


    You saved my day. Thanks for your help.

Similar Threads

  1. Getting Maps working inside an Overlay
    By starls in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 3 Oct 2010, 5:32 AM
  2. Android issue - Standard links broken inside TabPanel
    By mrjameshall in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 31 Jul 2010, 9:16 AM
  3. Scrolling issue inside TabPAnel
    By nicholasnet in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jan 2010, 3:27 PM
  4. grid doesn't size correctly inside tabpanel inside panel
    By pflammer in forum Ext 2.x: Help & Discussion
    Replies: 15
    Last Post: 5 Jan 2009, 12:00 PM
  5. Replies: 5
    Last Post: 7 Dec 2008, 9:19 PM

Thread Participants: 4