Help with Tabs

I have a tab with some text and image right next to it. The issue is that the image is coming right next to the text.
1. How can we give some spacing between the text and the image ?
2. How can we set the width of tabs (multiple tabs with different width)
#myTabs .aw-item-box {direction: rtl;width:250;)

var tabs = new AW.UI.Tabs;
var names = ["Summary by Cluster & Product", "Entity Cluster", "Counterparty"];
var values = ["div_grid1", "div_grid2", "div_grid3"];
tabs.setId("myTabs");
tabs.setItemText(names);
tabs.setItemValue(values); // store ids of content DIVs
tabs.setItemCount(3);
tabs.setSelectedItems([0]);
tabs.setItemImage(["smallwait"]);
tabs.refresh();

Pls help.... We are evaluating this tool very aggressively and doing a POC before we buy.

found the ans for # 1:
#myTabs .aw-item-box {direction: rtl;width:250;margin-left: 14px;}

Still hunting answer for #2

You should really have "width:250px" rather than "width:250".

For 1, you could simply add some non-breaking space to your text. The tab widths appear to be set to auto by default. You could try adding some CSS for the specific tab id you want to make larger. The IDs of the individual tabs are id_name + -item- + index number. So, with your tab id, the id names would be myTabs-item-0, etc. But, as with all the AW objects, the tabs are built with more than one span. The next inner span has -box added to its id name.

Thanks a ton !! This saved me a lot of time. Also I introspected that how did you figure out the ID. Ofcourse you must be a guru in AW !!! :o)

Found that it could simply be done using document.write(tabs);
It spits out all the spans you talked about and i could relate it much better ..

For #1: Is there a reason for width:250px to be specified with "px". Isnt it implicit that the unit is "px" ?

Thanks again.

>> Isnt it implicit that the unit is "px" ?

It depends on your doctype. It is implicit in 'quirks' mode but it must be specified in 'standards' mode.

You can also use something like this for setting tab width:

tabs.getItem(1).setStyle('width', '250px');

Thanks for a clear and precise answer. Perfect shot !!!!

Is ther a way to change the color of row separator. Currently I have a grid with 2 rows as headers and i have managed to change the background color of both the row headers but would like to change the color of the column separators too.
Any help on this would be appreciated....

>> Is ther a way to change the color of row separator

Sorry, could you explain what do you mean by row separator? Bottom border?

That would be background image of the .aw-grid-separator element (runtime/styles/xp/grid.png) in xp skin and header border in other skins.

> Also I introspected that how did you figure out the ID.

I always develop on FireFox and use the FireBug plug-in for debugging. FireBug makes in extremely easy to inspect elements on a page. It only took me a moment or two to check one of my own pages. I'd recommend using it.

> Found that it could simply be done using document.write(tabs)

I used to use alerts before I switched to FireBug. Not any more!

@Alex
---------
#myGrid-separator-0 .aw-grid-separator {height:100%;color:green;background:red;border-color:black;}

does not works for me. I hope i picked up the correct properties in the
.aw-grid-separator class

Height=100% because i want the grid header separators to be visible fully. Currently the headers appear to be broken equaly from top and bottom. Will height=100% work to fix this ?

FYI, I am using the following skin
<link href="../../runtime/styles/system/aw.css" rel="stylesheet">

@Anthony
-----------
Thanks for your tips. For us IE is a standard to follow so we do not have Firefox installed on our PC's (company policy :o( )

Forum search