Results 1 to 8 of 8

Thread: Tabpanel items not visible in modern app.

    You found a bug! We've classified it as EXTJS-21901 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Apr 2015
    Location
    India
    Posts
    176

    Default Tabpanel items not visible in modern app.

    I am creating a modern app with tabs.

    Please check the fiddle - https://fiddle.sencha.com/#fiddle/1dhq

    Items in the tabs are not visible. If i use layour:fit for tabpanel , then the items of all the tabs are shown in the single tab. If i don't use any layout then no item is shown.

    Thanks,
    Sahil

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    This seems like a bug. I'll move this thread to the Bugs forum. The issue seems to be with nesting the tab panel inside another container, so perhaps you can work around that until this is fixed.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    239

    Default

    Hi,

    This isn't a bug, TabPanels have to use card layout.
    What you probably want is to add layout fit to the tab panel items.
    Guilherme Lopes
    Sencha Support

  5. #5
    Sencha User
    Join Date
    Apr 2015
    Location
    India
    Posts
    176

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Thanks for the report! I have opened a bug in our bug tracker.
    Thank you Gary. I hope it will be fixed soon.

    Regards,
    Sahil

  6. #6
    Sencha User
    Join Date
    Apr 2015
    Location
    India
    Posts
    176

    Default

    Quote Originally Posted by guilherme.lopes View Post
    Hi,

    This isn't a bug, TabPanels have to use card layout.
    What you probably want is to add layout fit to the tab panel items.
    Thank you guilherme.lopes for the reply. I have tried that , but it still does not work..

    Regards,
    Sahil

  7. #7
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    239

    Default

    Sahil,

    There was a bug with the panel where setting it with fullscreen: true would not transform it into a viewPort. This error has been fixed in the latest nightlies but to manually fix this, just add the following code to your Panel:

    Code:
    style: {
        height: '100%'
    }
    And this styles to your index.html
    Code:
    <style>
    .x-dock.x-dock-vertical {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    }
    </style>
    Also, your panel should have:

    Code:
    layout: {
        type: 'vbox',
        align: 'stretch'
    This will make your tab panel stretch all the way to the bottom. Set your panel with flex: 1 and everything should display fine.

    I have saved your fiddle: https://fiddle.sencha.com/#fiddle/1dhq
    Guilherme Lopes
    Sencha Support

  8. #8
    Sencha User
    Join Date
    Apr 2015
    Location
    India
    Posts
    176

    Default

    Quote Originally Posted by guilherme.lopes View Post
    Sahil,

    There was a bug with the panel where setting it with fullscreen: true would not transform it into a viewPort. This error has been fixed in the latest nightlies but to manually fix this, just add the following code to your Panel:

    Code:
    style: {
        height: '100%'
    }
    And this styles to your index.html
    Code:
    <style>
    .x-dock.x-dock-vertical {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    }
    </style>
    Also, your panel should have:

    Code:
    layout: {
        type: 'vbox',
        align: 'stretch'
    This will make your tab panel stretch all the way to the bottom. Set your panel with flex: 1 and everything should display fine.

    I have saved your fiddle: https://fiddle.sencha.com/#fiddle/1dhq

    Thanks, it worked..

Similar Threads

  1. Replies: 0
    Last Post: 28 Mar 2016, 10:41 PM
  2. Replies: 1
    Last Post: 6 Jan 2016, 10:58 AM
  3. Dynamically added TabPanel items aren't visible
    By visus in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 23 Apr 2012, 4:27 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •