IBM Worklight - Unable to fix tabbar to the bottom of the screen

Question

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?

Answer 1

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

• Example code: Fixed Header and TabBar in a Worklight-based Dojo app
• Documentation reference

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