You found a bug! We've classified it as TOUCH-3714 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member hedgehog1's Avatar
    Join Date
    Feb 2012
    Location
    Portland, OR, USA
    Posts
    5
    Vote Rating
    0
    hedgehog1 is on a distinguished road

      0  

    Default Navigation View Title does not center correctly on smaller devices (Fix code includef

    REQUIRED INFORMATION



    Touch version tested:
    • sencha-touch-2.1.0 (betas and GA)
    Browser versions tested against:
    • Safari on Windows
    • Chrome on Windows
    • iOS and Android browsers
    Description:
    • When pushing onto the nav view, if title is a too long for the browser (like on smaller phones) the title is reduced in size, but not placed in the correct position.
    Steps to reproduce the problem:

    Example: (Note: real client data used, so data is squiggled out)

    About to push onto the nav view - and everything looks OK:



    View is pushed on small screen, and title is sized correctly, but placed in the wrong location:



    If you resize the browser, the title places correctly:




    HELPFUL INFORMATION


    Working fix:

    Here is a working fix for Ext.TitleBar. Insideits refreshTitlePosition: function() :

    Change this code:
    Code:
            var spacerBox = this.spacer.renderElement.getPageBox(),
                titleBox = titleElement.getPageBox(),
                widthDiff = titleBox.width - spacerBox.width,
                titleLeft = titleBox.left,
                titleRight = titleBox.right,
                halfWidthDiff, leftDiff, rightDiff;
    
    
            if (widthDiff > 0) {
                titleElement.setWidth(spacerBox.width);
                halfWidthDiff = widthDiff / 2;
                titleLeft += halfWidthDiff;
                titleRight -= halfWidthDiff;
            }
    
    
            leftDiff = spacerBox.left - titleLeft;
            rightDiff = titleRight - spacerBox.right;
    
    
            if (leftDiff > 0) {
                titleElement.setLeft(leftDiff);
            }
            else if (rightDiff > 0) {
                titleElement.setLeft(-rightDiff);
            }
    To this code:
    Code:
            var spacerBox = this.spacer.renderElement.getPageBox()
            titleElement.setWidth(spacerBox.width);
            titleElement.setLeft(-leftButton.renderElement.getWidth()+10);

    And then the title place correctly!


    Additional CSS used:
    • only default ext-all.css
    Operating Systems:
    • Server: Linux
    • Clients on: Windows 7 PRO, iOS, Android

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,546
    Vote Rating
    1120
    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

    Thanks for the report! I have opened a bug in our bug tracker.

Thread Participants: 1

Tags for this Thread