Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default Titlebar pushes content down in Safari but not in Chrome

    Titlebar pushes content down in Safari but not in Chrome


    Hello,

    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    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.)

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How about this pic on iPad itself:

    photo.PNG
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    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.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can I get the code for this?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1