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
    36,801
    Vote Rating
    834
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi