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

      0  

    Default Unanswered: Carousel causing weird Titlebar bug

    Unanswered: Carousel causing weird Titlebar bug


    I'm developing an iPad app with Sencha Touch 2.1 and Phonegap and I have a really weird bug goin on.

    I have a titlebar with a styled background image and a carousel in a container. The container's left value is set to 320, and is pushed off screen (on purpose). When the container's left value is changed to 0 (on a button click) the titlebar's background is missing in the portion that was off screen. If I scroll the carousel to the end and pull it past it's normal position, the background image restores to how it's suppose to be.

    I've tried using base64, an actual image, and css3 gradient and in all 3 instances this happens.

    Has anyone else had a problem with this? If so, what did you do to fix it?



    Here's my styling for the titlebar:
    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;
    }

    And my code:
    Code:
    // Content Panel
    
    Ext.define('App.view.Content', {
        extend: 'Ext.Container',
        config: {
            id: 'content',
            width: '100%',
            height: '100%',
            left: 320,
            top: 0,
            zIndex: 10,
            layout: 'fit',
            cls: 'open',
            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'},
                    ],
                },
            ]
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    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


    Have you inspected the DOM to see what is going on, is it just the image width is not big enough?

    Also, why is the carousel within a container? It doesn't need to be
    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.

Thread Participants: 1

Tags for this Thread