TabStrip iOS disappearing

[Antal]

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>

[Kamen Bundev]

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

[Antal]

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

  

[Petyo]

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

[Antal]

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!

[Trevor]

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.

[Kamen Bundev]

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

[Samuel]

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

[Kamen Bundev]

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

[Samuel]

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?

[Kamen Bundev]

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

[Matt]

Hi,

I have now started seeing the tabstrip disappear in Kendo Mobile [phone] + 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

[Petyo]

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

[Matt]

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

[Petyo]

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

[Matt]

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

[Petyo]

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