Titanium Community Questions & Answer Archive

Question

navControl at top of screen jumps when switching tabs

I have an app with 5 tabs, each tab has its own window…
In the first page, I put a navControl at the top in the TitleControl, like this:

var navControl = Titanium.UI.createTabbedBar({
    labels:['item1','item2'],
    style:Titanium.UI.iPhone.SystemButtonStyle.BAR
});
win.setTitleControl(navControl);

However, when I tap on tab 2 to go to page 2, then tap tab 1 to go back to page 1, the navControl jumps from the top center of the screen to the top left corner of the screen.

Accepted Answer

Accepted Answer

I am also encountering this issue as well. The TabbedBar would render correctly this first time the TabNavigator was selected. If you selected a different tab, then returned to the screen with the TabbedBar, that UI control would be rendered in the upper left of the titlebar.

My solution was to add the following:
win.addEventListener('focus', function()
{
win.titleControl = sessionDay;
});

win.addEventListener('blur', function()
{
win.titleControl = null;
});

sessionDay is TabbedBar Object.

Answer 2

I tried to reproduce in KS but it worked fine. Are you setting the title control within an event (e.g., focus)? maybe you can paste in more of the code so i can take a look.

Answer 3

Hi Nolan, I am having the same issue, here is a sample.
Just create a blank project, and add this line to the app.js on line 50

var tabbar = Titanium.UI.createTabbedBar({
    id:'tabbar', 
    index:0,
    labels:['7 Days', '30 Days','2010']
});

win2.setTitleControl(tabbar);

Answer 4

Thanks, Chris. This works well.

I've marked this in the code as a workaround, though. Hopefully in the next release they'll fix this and we can take this code out.

Answer 5