1. #1
    Sencha User hirokenshin's Avatar
    Join Date
    Jan 2012
    Location
    Paris, France
    Posts
    40
    Answers
    2
    Vote Rating
    0
    hirokenshin is on a distinguished road

      0  

    Default Answered: Ext.Label in ToolBar

    Answered: Ext.Label in ToolBar


    I tried to use an Ext.Label embed in a tool bar and I get a strange offset.
    This issue only appear in Safari but not in Chrome.

    Tested on Safari :

    - desktop 5.1.2
    - iPad iOS 5.0.1
    - iPhone 4 iOS 5.0.1

    I tried several thing to fix this but I don't get the perfect alignment.


    Here the ToolBar is docked to the bottom but it has the same behavior docked on top.

    Bug on Safari Desktop version:

    Capture d’écran 2012-02-07 à 15.20.04.png


    Bug on iPad : (it gets uglier)

    Capture d’écran 2012-02-07 à 18.54.25.png


    Code:
                   xtype: 'toolbar',
                    docked:'bottom',
                    ui:'light',
                    items: [
                        {
                            xtype: 'label',
                            html: 'old price'
                        },
                        {
                            xtype: 'button',
                            ui: 'confirm',
                            disable: false,
                            text:'Voir l\'offre'
                        }
                    ]

    Does someone has an idea on a workaround ?
    Last edited by hirokenshin; 7 Feb 2012 at 9:57 AM. Reason: add an ipad screenshot

  2. Are you sure you have no extra custom CSS?

    This is working fine for me using resources/css/sencha-touch.css and sencha-touch-debug.js.


  3. #2
    Sencha User
    Join Date
    Dec 2011
    Location
    Bogota, Colombia
    Posts
    33
    Vote Rating
    0
    xyrer is on a distinguished road

      0  

    Default


    tried in beta 1 and it doesn't happen

  4. #3
    Sencha User hirokenshin's Avatar
    Join Date
    Jan 2012
    Location
    Paris, France
    Posts
    40
    Answers
    2
    Vote Rating
    0
    hirokenshin is on a distinguished road

      0  

    Default


    I'm also using beta 1. (I should have said that too. my bad)
    Which build of the framework do you included ?

    I tried all sencha build but there is no difference.

    Actually the bug always appears on a device (tested on iPad 2, Iphone 4, Galaxy S1).

    On desktop, chrome is perfect. (not very usefull for mobile purpose but still a clue for debug)
    The desktop version of safari has the bug too.

    ps: I'm using a mac (maybe there are some differences with you)
    Last edited by hirokenshin; 7 Feb 2012 at 9:42 AM. Reason: precision on OS

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Are you sure you have no extra custom CSS?

    This is working fine for me using resources/css/sencha-touch.css and sencha-touch-debug.js.

    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #5
    Sencha User hirokenshin's Avatar
    Join Date
    Jan 2012
    Location
    Paris, France
    Posts
    40
    Answers
    2
    Vote Rating
    0
    hirokenshin is on a distinguished road

      0  

    Default


    I just excluded all custom css and it works.
    I'll investigate which property made this happened.

    Thank you for your help

Thread Participants: 2