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.
-
Sencha Premium Member
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:
Operating Systems:
- Server: Linux
- Clients on: Windows 7 PRO, iOS, Android