Thank you for reporting this bug. We will make it our priority to review this report.
Titlebar pushes content down in Safari but not in Chrome
I have a container that is added to Ext.Viewport. This container is a placeholder for the titlebar (docked to the top) and a carousel.
The carousel contains a dataview with "inline: true" so the dataview contents will wrap around inside the carousel, creating a grid-like layout (in this case 3x2).
On Windows, running this on Chrome (20.0.1132.57) lays out the content correctly. In other words, when the carousel and it's contents laid out, the height of the docked titlebar is NOT taken into account.
However, on Windows, running inside Safari (5.1.7 (7534.57.2)) the content laid out incorrectly. It is being pushed down by the height of the titlebar. (height of the lower boxes + height of titlebar = height of upper boxes). This is the same issue on the iPad, using Safari.
I'm guessing Chrome is correct because the layout should NOT take the height of the titlebar into account. But I don't know if this is an issue with Chrome or the framework itself?
You can compare the results in these two browsers on Windows. (Tested on Windows only). Demo.
Windows 7 Ultimate x64
Sencha Touch 2.0.1
Chrome 20.0.1132.57 latest as of today
Safari 5.1.7 (7534.57.2) - latest as of today
iPad 3 - iOS 5.1
Looking like this is working correctly in Safari 6, when I say correctly, the same as Chrome
Screen Shot 2012-07-30 at 10.23.34 AM.jpg
Well, thanks for checking. Although it's not really a relief since the goal is to eventually use Sencha on the iPad and Safari has the same issue on iPad as well. I thought Chrome and Safari was the two "standards" based browser I can test using Sencha, but apparently Safari is not up to the challenge yet.
(And based on the screenshot you are using a Mac and so that doesn't help since v6 is not available for Windows.)
How about this pic on iPad itself:
Thanks for checking Mitch!
I do have an iPad so I am able to test it on the device itself, but as you can see it is wrong on the iPad. The boxes on the lower row are smaller then the boxes on the top.
You can also see that the distance between of the names of the individual schools and the bottom of the images are different on the top row then in the bottom row. I've measured it. The difference is 46 pixels, exactly the height of the titlebar.
Can I get the code for this?