1
 <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

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Add your HTML, CSS and JavaScript to the question. This is too theoretical. – Idan Adar Jul 02 '13 at 12:01

  • header text

    //here I am loading my pages

    simple footer

    this is my main html page. and in serverpages html page i have

    this div with id=tabbuttonsContainer i am using this as parentdiv WL.TabBar.setParentDivId("tabButtonsContainer"); but still the tab bar is coming at the top only
     –  Jul 02 '13 at 12:11

2 Answers2

1

-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

uriz
  • 109
  • 3
  • about tab bar style, could be that `position: fixed` not working as it should? If i scroll the page the tab bar scrolls too..Have you noticed this issue? – Salvatore Ucchino Dec 09 '13 at 16:59
0

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

tik27
  • 2,698
  • 1
  • 16
  • 25