TabStrip iOS disappearing

17 posts, 1 answers
  1. Antal
    Antal avatar
    5 posts
    Member since:
    Jun 2011

    Posted 02 Feb 2012 Link to this post

    I'm trying out Kendo UI Mobile, but the first issue I have is that the tabStrip positions itself below the fold, that is, you have to scroll up to see it (+it should not scroll at all).
    This happens always, whatever method I try to use/initiate the TabStrip. The example html with Carine Callahan is even worse, because the first page is so long, you cannot get at the tabstrip at all...

    This happens only in iOS, browser & android are fine...

    Could anybody help me, I do like the idea, plus initial results, I would like to use this in a production PhoneGap project...

    Antal


    -- edit: This problem seems not to be related to the TabBar, but seems to bee a bigger problem of the header & footer sections in combination with phonegap... See thread: <a href="http://www.kendoui.com/forums/mobile/general-discussions/header-footer-problems-in-ios-with-phonegap.aspx#1972091">header-footer-problems-in-ios-with-phonegap</a>

  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 Feb 2012 Link to this post

    Hi Antal,

    This is a known Kendo Mobile beta issue in iOS - we don't detect PhoneGap properly and the address bar hack is getting applied, thus resizing the whole app vertically and hiding the TabStrip. To avoid it, add this javascript right after PhoneGap declaration and before Kendo Mobile's:
    <script>
        if (typeof window._nativeReady === "undefined")
            window._nativeReady = true;
    </script>


    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Antal
    Antal avatar
    5 posts
    Member since:
    Jun 2011

    Posted 02 Feb 2012 Link to this post

    Yes, this does resolve most of the issue, except for the statusbar. When that is visible, as I plan to do in my app, the height of that bar is not subtracted from the total page, hiding the texts of the tabs...

    I don't know if that is detectable at all; is there a way to change the height manually?
    Also, the whole page still scrolls, even with the status bar hidden. I'm not sure if that is a PhoneGap issue or Kendo UI, but if that could be resolved, the app would feel a lot more "native"...

    Regards, 
    Antal

      
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Feb 2012 Link to this post

    Hi,

    I am not sure what may be the cause here. From the other thread, I modified the xCode project (only the overview example), and the tabstrip seems working. See the attached project. 

    Maybe we are missing something? 

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Antal
    Antal avatar
    5 posts
    Member since:
    Jun 2011

    Posted 02 Feb 2012 Link to this post

    Finally found it...
    I had 

        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    in my own header... Obviously device-height does not take the status bar into account. For future reference...

    That plus 

        <script type="text/javascript">
            if (typeof window._nativeReady === "undefined")
                window._nativeReady = true;
        </script>

    is the complete answer.

    Thank you, keep up the good work!
  7. Trevor de Koekkoek
    Trevor de Koekkoek avatar
    6 posts
    Member since:
    Oct 2010

    Posted 02 Feb 2012 Link to this post

    I have this behavior even though I am not using PhoneGap.  If I have a listview with header and footer and switch to Landscape view, the footer disappears.  If I refresh the page, it returns.  However if I now switch back to portrait, the Footer is up in the middle of the page and not at the bottom.
  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 06 Feb 2012 Link to this post

    Hi Trevor,

    This is a known issue, that happens only in Adnroid. We will try to fix it for the next beta. Unfortunately no workaround is available for now.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Samuel
    Samuel avatar
    3 posts
    Member since:
    Nov 2010

    Posted 10 Jul 2012 Link to this post

    Kamen,

    I've updated my scripts and css to the Q2 beta, and our PhoneGap app is responding better, and we are seeing less glitches than before.  However, this TabStrip disappeared once we updated and deployed the app to an iPhone, and none of the fixes described previously fix the issue.  Is this going to be fixed in the 2012 Q2 RTM?

    Thanks,
    Sam
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Jul 2012 Link to this post

    Hello Samuel,

    If you load PhoneGap's javascript file before Kendo Mobile's, there's a bigger chance that Kendo Mobile will detect it. If still an issue, you can disable the hiding of the address bar entirely by initializing the Application with the hideAddressBar option.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Samuel
    Samuel avatar
    3 posts
    Member since:
    Nov 2010

    Posted 10 Jul 2012 Link to this post

    Does the hideAddressBar have anything to do with the hiding of the TabStrip (http://demos.kendoui.com/mobile/tabstrip/index.html) in Q2 2012 (current beta)?  If so, are you saying if I set that to false, will it make the TabStrip appear?

  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Jul 2012 Link to this post

    Hi Samuel,

    Most likely, since the hiding is done by resizing the view with the height of the address bar, then scrolling it out of the screen. However, it shouldn't happen in PhoneGap if the PhoneGap/Cordova javascript file is loaded before the Kendo scripts. If this doesn't happen, can you isolate the issue in a small project and send it over in the ticket you opened?

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Matt
    Matt avatar
    58 posts
    Member since:
    Jun 2009

    Posted 05 Aug 2012 Link to this post

    Hi,

    I have now started seeing the tabstrip disappear in Kendo Mobile 2012.2 710 + Cordova 2.0 + the using certain cases of app.navigate("#xyz")! 

    It was not happening before this in my previous build with cordova 1.8 and previous kendo (not sure exact), I do not have an exact test case yet and was really hoping you are aware of this and a fix is in the pipeline?

    Please let me know.

    Thanks

  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 Aug 2012 Link to this post

    Hello Matthew,

    Thanks for contacting us. We are not aware of such issue. If you manage to create a concrete test case, please send it to us - we will try to resolve it. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Matt
    Matt avatar
    58 posts
    Member since:
    Jun 2009

    Posted 06 Aug 2012 Link to this post

    Hi Petyo,

    Sorry really pressed for time, tried to start a rushed (excuse if its a mess) fiddle to look at it but does not show specific problem (but hope if may trigger one of you to see it via related). My actual issue happens with listview presses navigating around and it may take a while to repeat (this is frustrating as was just upgrading for final release of app).

    http://jsfiddle.net/wickedw/4Jt8u/

    Could you have a look at it by pressing the play buttons twice in a row then hitting back a few times (etc, using chrome), there is some weird sub-view within view going on behind the slide which could point to something wrong with navigate / back / other???

    Another which is probably unrelated and is really just broken code but maybe worth a look?
    If you change the intial view to something undeclared such as -
    initial:"history1zxcsdfsfds", then pressing run in fiddle and then wipes the screen out.

    Thanks
    Matt

  16. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 Aug 2012 Link to this post

    Hi Matthew,

    The issue you describe should be resolved in our latest internal build. Please give it a try. 

    I would also like to notice that you should open separate tickets/forum posts for different issues. This helps us track/respond to them easier. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Matt
    Matt avatar
    58 posts
    Member since:
    Jun 2009

    Posted 06 Aug 2012 Link to this post

    Hi Petyo,

    I have retried this and it has resolved part of the issue whereby a navigate from one of my button clicks was causing the issue, BUT the issue with an app.navigate from a listview click is still there, could you get this reviewed for me please?

    (note: I am not always navigating to a top level view / one that is pointed to directly by a tabstrip, not sure this is relevant)

    Thanks
    Matt
  18. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 Aug 2012 Link to this post

    Hello Matthew,

    I am not sure which one of the issues you describe you refer to. Is it possible for you to open a support ticket, describing the concrete problem, along with a sample project that demonstrates it? Sorry for the additional roundtrip required. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready