IBM Worklight - Placing tab bar below the header in integrating server generated pages application

StackOverflow https://stackoverflow.com/questions/17424890

Question 

 <body id="content">
  <div data-role="header">
     <h3>header text</h3>
   </div>

   <div data-role="content" id="pagePort">
       //here I am loading my integrating server generated pages sample application
   </div>

    <div data-role="footer">
       <h3>simple footer</h3
    </div>
 </body>

this is my main html page. and in server pages html page i have 

 <div id="AppBody"> 
   <div id="tabButtonsContainer">
  </div>

this div with id = "tabbuttonsContainer" i am using this as parentdiv as follows in my js file

WL.TabBar.setParentDivId("tabButtonsContainer"); but still the tab bar is coming at the top only

Was it helpful?

Solution

-take a look at the .tabBar css class. it has position:fixed, top:0 and left:0, and this is why the tabbar is still rendered on top, even though its parent is somewhere else - fixed is relative to the browser...

-There is an open bug on this.

-you could try and play around with the position property of tabbar (or his parent) to change this - just make sure that it doesn't affect the elements above/below the tabBar.

-In addition - the Android tabbar is supposed to be at the top/bottom, according to their design principles. so maybe there is a better building block for your needs?

cheers

OTHER TIPS

I believe the tabbar mimics the android tabbar functionality, sadly that means for android the tabbar will appear at the top, on ios it will on the bottom. Though the document does say that it is an HTML element for android, so if you can find the css that controls this you might be able to override it.

http://pic.dhe.ibm.com/infocenter/wrklight/v6r0m0/index.jsp?topic=%2Fcom.ibm.worklight.help.doc%2Fapiref%2Fr_wl_tabbar_additem.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top