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