Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
    camdagr8 is on a distinguished road

      0  

    Default Answered: Carousel causing weird Titlebar bug

    Answered: Carousel causing weird Titlebar bug


    I'm creating an iPad app using Sencha Touch 2.0 and Phonegap 2.3 and experiencing a really weird bug with a styled titlebar and a carousel inside a container. I'm doing a slide left/right to expose a menu that is behind the container (like the facebook app).

    The container's left value is 320 and partially off screen, when it's left is set to 0 and the container is completely within view, it looks like this:

    Screen Shot 2013-02-08 at 8.27.12 PM.png

    Here's my CSS:
    Code:
    /**
     * Toolbar
     */
    .x-toolbar {
        padding: 0 !important;
        -webkit-box-shadow:  0px -3px 10px 5px rgba(0, 0, 0, 0.3);
                box-shadow:  0px -3px 10px 5px rgba(0, 0, 0, 0.3);
    
    }
    .x-toolbar.x-navigation-bar {
        border: none;
        height: 50px;
        background: url(./assets/titlebar_bg.png);
        background-repeat: no-repeat;
        background-position: top center;
        padding: 0 !important;
    }
    /* Toolbar title text */
    .x-toolbar.x-navigation-bar .x-title {
        color: #FCFCFC;
        font-size: 24px;
        font-weight: normal !important;
        font-family: 'Arial';
        text-shadow: 0px 1px 2px #000000;
    }
    
    .x-toolbar.x-navigation-bar .z-back-button .x-badge {
        margin-top: 5px !important;
        padding-top: 1px !important;
        padding-bottom: 2px !important;
    }
    
    .x-toolbar.x-navigation-bar .z-back-button .x-button-label {
        height: 26px;
        color: #D0D0D0;
        font-size: 12px;
        margin-left: 16px;
        font-weight: bold;
        font-family: 'Arial';
        padding: 6px 10px 0 2px;
        text-transform: uppercase;
        background-repeat: repeat-x;
        text-shadow: 2px 2px 2px #000000;
        border-radius: 0px 8px 8px 0px;
        -webkit-border-radius: 0px 6px 6px 0px;
    }
    
    /* Toolbar button */
    .x-toolbar.x-navigation-bar .z-button {
        line-height: 50px;
        color: #FCFCFC;
        font-family: 'Arial';
        font-size: 32px;
        font-weight: normal;
        text-transform: uppercase;
        -webkit-border-radius: 8px;
        background-repeat: repeat-x;
        text-shadow: 0px 1px 2px #000000;
        padding: 6px 14px;
    }
    .x-toolbar.x-navigation-bar .x-button-pressing .x-button-label{
        opacity: 0.25;
    }
    .x-toolbar.x-navigation-bar .z-button-left {
        background-image: url('./assets/titlebar_left.png');
        background-position: top right;
        background-repeat: no-repeat;
        padding: 6px 14px 6px 12px;
    }
    
    .x-toolbar.x-navigation-bar .z-button-right {
        background-image: url('./assets/titlebar_right.png');
        background-position: top left;
        background-repeat:  no-repeat;
        padding: 6px 12px 6px 14px;
    }
    Here's my code:
    Code:
    // Content Panel
    
    Ext.define('App.view.Content', {
        extend: 'Ext.Container',
        config: {
            id: 'content',
            width: '100%',
            height: '100%',
            left: 0,
            top: 0,
            zIndex: 10,
            layout: 'fit',
            cls: 'closed',
            style: 'background-color: #666666;',
            items: [
                {
                    xtype: 'titlebar',
                    id: 'titlebar',
                    docked: 'top',
                    title: 'Lesson Title',
                    items: [
                        {
                            xtype: 'button',
                            id: 'btn-menu',
                            baseCls: 'z-button',
                            cls: 'z-button-left',
                            html : '<i class="icon-list"></i>',
                            align: 'left',
                        },
                        {
                            xtype: 'button',
                            id: 'btn-toc',
                            baseCls: 'z-button',
                            cls: 'z-button-right',
                            html : '<i class="icon-list-2"></i>',
                            align: 'right',
                        },
                    ],
                    listeners: {
                        initialize: function (e) {
                            this.element.addListener('swipe', Core.titleSwipe, this, e);
                        }
                    },
                },
                {
                    xtype: 'carousel',
                    id: 'main',
                    layout: 'fit',
                    items: [
                        {html: 'test 1', style: 'background-color: #FF0000'},
                        {html: 'test 2', style: 'background-color: #00FF00'},
                        {html: 'test 3', style: 'background-color: #0000FF'},
                        {html: 'test 4', style: 'background-color: #FF0000'},
                        {html: 'test 5', style: 'background-color: #00FF00'},
                        {html: 'test 6', style: 'background-color: #0000FF'},
                    ],
                },
            ]
        }
    });
    Last edited by camdagr8; 8 Feb 2013 at 11:06 PM. Reason: Resolved

  2. I set a zIndex on my titlebar to 50 and 0 on my carousel and that seems to fix the issue!

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

      0  

    Default Resolved!

    Resolved!


    I set a zIndex on my titlebar to 50 and 0 on my carousel and that seems to fix the issue!