Need overlapping end caps for tabs

[curiousgally]

What I need can be best described as per the attached image. The way smartgwt renders images for the tab title is, it has three images start,stretch and end. It uses the same images for all the tabs in a tabset. But what we need is to have an overlapping images for the tabs present in between the first and last tab.

Is there a way to achieve this.

Thanks.

[sjivan]

I have done this in the past. See the tabs here. The TreeFrog theme also has overlapping tabs and you can have a look at that skin to see how its done.

Sanjiv

[curiousgally]

Thanks Sjivan, we could able to achieve that. Now we are trying to style the tab pane container edges.

The properties mentioned in the load_skin.js of the theme you have mentioned are so confusing:

topEdgeSizes:{defaultSize:10, top:10, bottom:5},
            bottomEdgeSizes:{defaultSize:2, bottom:10, top:25},
            leftEdgeSizes:{defaultSize:2, left:1, right:25},
            rightEdgeSizes:{defaultSize:2, right:1, left:25},
            
            topEdgeOffsets:{right:1, bottom:2},
            bottomEdgeOffsets:{right:1, top:2},
            leftEdgeOffsets:{bottom:1, right:2},
            rightEdgeOffsets:{bottom:1, left:2}

When i changed the bottomEdgeSizes -> bottom:10 it changed the right edge of the pane by 10. surprising how these settings work !!!
I checked the smartclient docs also to see if any description is available on this. It would be very helpful if you can explain these.

I faced similar issue in understanding how it works while trying to have custom edges for a window. But window didn't have sub properties like in this case, so was able to crack them after some struggle.

Thanks.

[Isomorphic]

If you ever need to work directly with SmartClient components in JavaScript, you can look at the SmartClient reference docs to find information on what properties do what.
Here's some documentation on these properties: http://www.smartclient.com/docs/8.0/...bottomEdgeSize

[curiousgally]

Thanks Iso I had figured how they work after spending some time. The doc you have shared is still not 100% understandable. Let me put it here so that somebody may stumble upon:

            topEdgeSizes:{defaultSize:2, top:1, bottom:25},
            bottomEdgeSizes:{defaultSize:2, bottom:1, top:25},
            leftEdgeSizes:{defaultSize:2, left:1, right:25},
            rightEdgeSizes:{defaultSize:2, right:1, left:25},
            
            topEdgeOffsets:{right:1, bottom:2},
            bottomEdgeOffsets:{right:1, top:2},
            leftEdgeOffsets:{bottom:1, right:2},
            rightEdgeOffsets:{bottom:1, left:2}

The top or bottom or left or right EdgeSizes present outside the {} indicate the Tab position. 'topEdgeSizes' configure details of how the edges are sized when the Tab Bar is at top and the configurations inside the {} indicate the respective edge sizes. The same is applicable for the offsets too.

Hope this helps somebody. People might get confused that topEdgeOffsets means the topEdge of the tab pane while the inner configuration would relate to position of the tab. Atleast I got confused initially :)

Thanks.