2

According to the documentation for WL.TabBar.addItem regarding the title parameter:

WL.TabBar.addItem(id, callback, title, options);

title   Mandatory string. The title of the tab. If null is passed, no title is displayed.

However, if I pass the value null like this:

WL.TabBar.addItem("myId", function(){ ... }, null, { ... });

I get this error:

Invalid invocation of method WL.TabBar.addItem; Invalid value 'null' (object), expected type 'string'.

And if I pass an empty string " ", I don't see the title but there's empty spacing at the bottom, below the icon.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
Salvatore Ucchino
  • 717
  • 1
  • 8
  • 17

1 Answers1

0

Well, it's clearly a bug... :)
I have opened a defect. Thanks!

If what you want to do is to center-align the icon in the tab when there is no text involved, then adding the following to your Android environment's .css file will suffice:

.tabSpan {
   background-position:center; 
}

In addition, and if required, you can also play with the icon dimensions.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • i have thought same thing..btw i'll try to adjust the css to fix this issue :) – Salvatore Ucchino Dec 06 '13 at 22:39
  • Did it help aligning the tabbar icons for you? – Idan Adar Dec 07 '13 at 17:22
  • i tried with `background-position:center;` but it doesn't work. Instead i'm working on `.tabItem` (i think) editing padding-top o something which add space. – Salvatore Ucchino Dec 07 '13 at 21:28
  • Strange, worked for me... make sure you've applied it to .tabSpan (you need only add it to the CSS, not HTML). Editing .tabItem will move the entire tab, you don't want that. You want to only edit the contents of the tab item, and that's .tabSpan; please provide some more details to recreate it. – Idan Adar Dec 07 '13 at 21:28
  • i was wrong, i used `.tabBar` instead of `.tabSpan`. i hadn't noticed..:) – Salvatore Ucchino Dec 08 '13 at 00:22
  • Is also possible to fix it somehow in iOs environment? – Salvatore Ucchino Dec 08 '13 at 09:10
  • In iOS the TabBar is native implementation and follows the guidelines set by Apple, I do not think it is OK to have the tabbar w/out text (even in Android, really). Why not have text? The user should know how s/he taps on. – Idan Adar Dec 08 '13 at 09:12
  • In theory i could add the text on each item, but if the string is long (two words f.e.) it is hidden. It is a choice of style – Salvatore Ucchino Dec 08 '13 at 09:21
  • Then for iOS your best option is to create your own native tabbar controller... http://ios-app-development.tumblr.com/post/32321250434/how-to-create-a-fully-customized-tab-bar-in-your-ios – Idan Adar Dec 08 '13 at 09:24
  • about tab bar style, could be that `position: fixed` not working as it should? If i scroll the page the tab bar scrolls too.. – Salvatore Ucchino Dec 09 '13 at 16:24
  • I don't know... I mentioned .tabSpan { background-position:center; } not fixed. – Idan Adar Dec 09 '13 at 16:27
  • tab bar in Android does not respect the css `.tabBar {position: fixed, top: 0px;}` – Salvatore Ucchino Dec 09 '13 at 16:35
  • Rajin, please, in this question you asked about how to position the icons in the center of the tab. I answered your question. I will not transform the comments area to a discussion about something entirely different. If your original question is resolved, please mark this question as answered. – Idan Adar Dec 09 '13 at 16:37
  • As for "not working", there is no such thing, because the tabbar is purely based on JS, HTML and CSS... if something is "not working" then something you wrote clashes with the existing code, it doesn't mean it "doesn't work". You can take all classes and functions and override them in your code to produce your own tabbar. – Idan Adar Dec 09 '13 at 16:37