1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Answers
    4
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default Answered: Android browser: TabPanel content hidden

    Answered: Android browser: TabPanel content hidden


    I'm working on an app that looks fine iOS and other browsers I've tried, but in Android 2.3 browser the height of the scrollable content (basically everything in the app) is just a few pixels. I can see a tiny scroll bar if I swipe the view, but nothing else.

    The viewport is a TabPanel, with 5 items:
    - Container (layout: fit, scrollable: true, all content in html config)
    - NavigationView (initial item: list)
    - NavigationView (initial item: list)
    - NavigationView (initial item: list)
    - Container (layout: card, initial item: container w/ layout: fit)

    There are no layout configs on the TabPanel, just the items and basic TabBar setup.

    Anyone come across this?

  2. Thanks for your reply. So, ugh, it looks like I finally solved this problem, but I don't understand the solution, which bothers me.

    My Ext.application.launch() method looked like this:

    Code:
        launch: function() {
            MyAppName.config = {
                // config stuff...
            };
    
    
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyAppName.view.Viewport'));
        },
    After removing the Ext.fly line, everything works as expected in Android. If anyone can explain this to me, I would appreciate it. (One clue: before finding this solution, I had discovered that if I managed to push a new card onto one of the NavViews (using a toolbar button), once I popped it off, the other views throughout the app rendered properly.)

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Answers
    3515
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The tab panel will already have card layout specified so you do not need to give the tab panel a layout. Using card layout, each item will get 100% height and width so the direct children should be sized properly. If you are nested items under another item without setting a layout then that's where I can see something going wrong.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Answers
    4
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default Hmmm

    Hmmm


    Thanks for your reply. So, ugh, it looks like I finally solved this problem, but I don't understand the solution, which bothers me.

    My Ext.application.launch() method looked like this:

    Code:
        launch: function() {
            MyAppName.config = {
                // config stuff...
            };
    
    
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyAppName.view.Viewport'));
        },
    After removing the Ext.fly line, everything works as expected in Android. If anyone can explain this to me, I would appreciate it. (One clue: before finding this solution, I had discovered that if I managed to push a new card onto one of the NavViews (using a toolbar button), once I popped it off, the other views throughout the app rendered properly.)
    Last edited by bjudson; 7 Feb 2013 at 2:32 PM. Reason: fomatting

Thread Participants: 1

Tags for this Thread