1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    willai is an unknown quantity at this point

      0  

    Default Carousel Indicator not visible with Toolbar - incorrect sizing?

    Carousel Indicator not visible with Toolbar - incorrect sizing?


    Hi,

    I want to place a toolbar and a carousel component in a single container using Sencha Touch 2 PR3 (see code below).

    Both components are being displayed as desired, but the indicator of the carousel cannot be seen on the screen. As soon as I remove the toolbar, the indicator is visible.

    Am I doing something wrong, or does the sizing of the components of the container not work properly yet in Sencha Touch 2 PR3? This assumption is based on the fact, that if I force a height of say 100pxl on the carousel, the indicator is visible again.

    PHP Code:
    launch: function() {
            
    Ext.create("Ext.Container", {
                
    fullscreentrue,
                
    layout: {
                    
    type'vbox',
                    
    align'stretch'
                
    },
                
    items: [
                        {
                            
    xtype'toolbar',
                            
    title'MyToolbar',
                            
    docked'top'
                        
    },
                        {
                            
    xtype'carousel',
                            
    //height: '100',
                            
    items: [
                                    {
                                        
    xtype'button',
                                        
    height'50',
                                        
    text'button 1'
                                    
    },
                                    {
                                        
    xtype'button',
                                        
    height'50',
                                        
    text'button 2'
                                    
    }
                            ]
                        },
                        
                ]
            });
        } 
    The HTML-File:
    PHP Code:
    <head>
    <
    meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <
    meta name="apple-mobile-web-app-capable" content="yes" />
    <
    meta name="apple-mobile-web-app-status-bar-style" content="black" />


    <
    title>SimpleTest</title>

        <
    link rel="stylesheet" href="../touch/resources/css/sencha-touch.css" type="text/css">
        
        <
    script type="text/javascript" src="../touch/sencha-touch-all-debug-w-comments.js"></script>
        <script type="text/javascript" src="app/app.js"></script>

    </head> 
    Thanks in advance for your answers - any help or indication is welcome
    Last edited by willai; 7 Jan 2012 at 7:02 AM. Reason: highlighted the problem

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    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


    With PR3, this is working no problems for me in Chrome and iOS simulator (I added flex to give the carousel a height):

    Code:
    Ext.create("Ext.Container", {
        fullscreen: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            {
                xtype: 'toolbar',
                title: 'MyToolbar',
                docked: 'top'
            },
            {
                xtype: 'carousel',
                //height: '100',
                flex : 1,
                items: [
                    {
                        xtype: 'button',
                        height: '50',
                        text: 'button 1'
                    },
                    {
                        xtype: 'button',
                        height: '50',
                        text: 'button 2'
                    }
                ]
            }
        ]
    });
    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.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    willai is an unknown quantity at this point

      0  

    Thumbs up


    Jeee... that does the job...

    Thank you very much - I tried playing around with flex, but this I haven't tried.

Thread Participants: 1

Tags for this Thread