Styling tabs

Suite and Optimus Suite 5
#1

I’m having trouble styling tabs the way I want them to be. The tabbar is left aligned and I’m using images for labels, but the images are being cut of. Here’s my code

<styles>.tab { margin-top: 5px; margin-bottom: 5px; margin-left: 2px; }</styles> tabbar = dhxLayout.cells("a").attachTabbar("left"); tabbar.setMargin("5"); tabbar.setSkin('dhx_web'); tabbar.setImagePath("img/"); tabbar.addTab("a1","<div class='tab'><img src='img/contacts.png'>&nbsp;</div>","*"); tabbar.addTab("a2","<div class='tab'><img src='img/calendar.png'>&nbsp;</div>","*"); tabbar.addTab("a3","<div class='tab'><img src='img/task.png'>&nbsp;</div>","*"); tabbar.addTab("a4","<div class='tab'><img src='img/memos.png'>&nbsp;</div>","*"); tabbar.addTab("a5","<div class='tab'><img src='img/journal.png'>&nbsp;</div>","*"); tabbar.setTabActive("a1");
In addition to not being quite what I want, this code also leads to inconsistencies between Firefox and Chrome.


Any ideas on how to fix this would be appreciated.
Thanks!

#2

Hello
Please, tell us your tab-icons size

#3

Hi Darya,

Thanks for getting back to me. The images are 40 X 40 pngs.

#4

Try the next approach:

[code]

tabbar html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color:white; } .dhx_tab_element div { width: 50px !important; height: 50px !important; background-image: none !important; } .dhx_tab_element { text-align: left; vertical-align:text-bottom; } .dhx_tabbar_zone_dhx_web .dhx_tabbar_row { width: 50px !important; } .dhx_tablist_zone { width: 50px !important; } .dhx_tab_element_active { width: 50px !important; } .dhx_tab_element_inactive { width: 50px !important; } .dhxcont_tabbar_dhx_web { left: 30px !important } .tab { margin-top: 5px; margin-bottom: 5px; margin-left: 5px; } 
<body onload='doOnLoad()'>
		<div id="b_tabbar" style="width: 500px; height: 500px; margin: 50px;"></div>
</body>
[/code] The result:
#5

Thanks Darya!

That worked like a charm. :smiley:

#6

You are welcome!