CODEWITHSUNDEEP
androidandroid-webviewtabbaribm-mobilefirst
user2542428
user2542428

Reputation:

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

 <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

Upvotes: 1

Views: 451

Answers (2)

uriz
uriz

Reputation: 107

-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

Upvotes: 1

tik27
tik27

Reputation: 2698

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

Upvotes: 0

Related Questions