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

[hedgehog1]

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:
http://imageshack.us/a/img405/4158/navbartitle01.png


View is pushed on small screen, and title is sized correctly, but placed in the wrong location:
http://imageshack.us/a/img856/8302/navbartitle02.png


If you resize the browser, the title places correctly:
http://imageshack.us/a/img831/1215/navbartitle03.png



HELPFUL INFORMATION


Working fix:

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

Change this 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:

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

[mitchellsimoens]

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