Results 1 to 6 of 6

Thread: Titlebar pushes content down in Safari but not in Chrome

    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
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Vote Rating
    10
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    How about this pic on iPad itself:

    photo.PNG
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Vote Rating
    10
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    Can I get the code for this?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •