Results 1 to 2 of 2

Thread: Carousel causing weird Titlebar bug

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •