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:



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:

        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.