1

I am trying to develop a simple application that has a header and a footer (tab bar) which consist of two labels.

Html: 

<div data-dojo-type="dojox.mobile.View" id="Img1">
    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
    <li data-dojo-type="dojox.mobile.TabBarButton" icon="images/Arrow-turn-right-icon.png" data-dojo-props="transition:'flip',dir:'-1',moveTo:Home">Label</li>
    </ul>
</div>

When I tried this, the tab bar still appears at the top of the screen. How can i fix that at the bottom of the screen?

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
UjjawalKr
  • 241
  • 1
  • 4
  • 20

1 Answers1

1

You need to place the TabBar widget inside a scrollableView rather than a View.

HowTo:

  1. Create a new Worklight 6.1.0 project and application and choose to add to it the Dojo Mobile framework via the wizard. Add an environment to test in. Read this training module.

  2. Using the Rich Page Editor, drag from the Dojo Palette view a Heading widget and a TabBar widget into the auto-generated scrollableView div in the HTML file.

    • You can of course add icons...
    • I've also set fixed="top" for the Header so it'll be fixed as well.

  3. Run As > Run on Worklight Development Server.

  4. Because I don't have an Android device, I also added the iPhone environment and loaded the app web resources in my device using the MBS QR code feature.

    In both iPhone and Worklight Console preview I was able to see and scroll the app contents while the Header and TabBar are fixed at the top and bottom respectively.

Full size enter image description here

Community
  • 1
  • 1
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • When i tried this with Scrollable view navigations between the views isn't working. Any help regarding that.Take a look of this question http://stackoverflow.com/questions/20907901/navigation-between-view-not-working-dojo-worklight-application – UjjawalKr Jan 03 '14 at 16:20
  • But this question is about FIXED TABBAR; If your TABBAR is now FIXED, this specific question is answered. Please mark as Answered. I will look at the other question. – Idan Adar Jan 03 '14 at 16:24
  • I have replied to the other question. – Idan Adar Jan 03 '14 at 17:21