ajax tab panel/tab container buggy

Im having a few problems with using tabpanel/tabcontainer from the toolkit...

i tried to style the tabs. i editted the tab images that are given by default with the ajax toolkit, (only the color of the tabs, not the image sizes).

there appears to be a 1 pixel gap between the tab-right-image and the tab-image. i really am having trouble getting rid of it.

also, i placed a google map (using google maps api) in one of the tabs. i had it centered at some fixed coordinates. when outside the tab the map looks fine, but inside the tab the centre of the map goes to the top lefr corner of the <div> that the map is in.

I have the same problem with the coordinates in tab panel. Did you figure it out?

Thanks

You need to fix the "padding" value in your custom tabs css.

I did the exact same thing in an old project (changed the tabs from yellow to gray...),

can't remember exactly which padding I had to change, but here is the css:

/* xp theme */
.MyTabs .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px; color:White; font-weight:bold;
background:url(images/MyTabs2/tab-line.gif) repeat-x bottom;
}
.MyTabs .ajax__tab_outer
{
padding-right:0px;
background:url(images/MyTabs2/tab-right.gif) no-repeat right;
height:21px;
}
.MyTabs .ajax__tab_inner
{
padding-left:3px;
background:url(images/MyTabs2/tab-left.gif) no-repeat;
}
.MyTabs .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(images/MyTabs2/tab.gif) repeat-x;
}
.MyTabs .ajax__tab_hover .ajax__tab_outer
{
background:url(images/MyTabs2/tab-hover-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_hover .ajax__tab_inner
{
background:url(images/MyTabs2/tab-hover-left.gif) no-repeat;
}
.MyTabs .ajax__tab_hover .ajax__tab_tab
{
background:url(images/MyTabs2/tab-hover.gif) repeat-x;
}
.MyTabs .ajax__tab_active .ajax__tab_outer
{
background:url(images/MyTabs2/tab-active-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_active .ajax__tab_inner
{
background:url(images/MyTabs2/tab-active-left.gif) no-repeat;
}
.MyTabs .ajax__tab_active .ajax__tab_tab
{
background:url(images/MyTabs2/tab-active.gif) repeat-x;
}
.MyTabs .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:8px;
background-color:#cccccc;
}

It's one or two of the padding values that changed from the default css.

I've tried all the padding settings that you mentioned in your message, however it hasn't fixed the problem.

It's odd because, in Firefox the google maps works fine, however in IE 7 it's truncating the side of the google map. I'll keep trying to see if I can get it working.

I was talking about the pixel gap for image right thing in the tabs in the other post...

To center the map, can you put a table with width="100%" and horizontalAlign="Center" in the tabpanel?

Hi NNM, it doesn't seem to be as simple as that. I tried centering it like this but it doesn't work. Have a look at this page to have an example of what is the problemhttp://www.twilightblue.eu/en/hotel/121975-campanile-hotel-runcorn.aspx then click on the map section and scroll down. It due to the center point not being in the middle of the div. This works fine outside of the tabpanel and in firefox. Also appartently it works if the map is in the first tab panel.

I found a few other postings on this topic, but no real solution. Seehttp://www.reimers.dk/forums/thread/1212.aspx. Any additional help would be appreciated.

I see...

Never used google maps in an app before...

But in this situation, I would "work around" the issue by placing an iframe inside your last tabpanel, where you want the map to be.

In the iframe, put nothing but the google map. That way, you can "trick" the google map into thinking it's outside of the tabpanel..! And that should avoid any conflicts..

Just an idea..

(PS: off topic, but I noticed some warnings in ie7: 4 cookies blocked: 2 from images.activehotels.com ... and 2 from google maps. Just so u know)

Hi Christopher

I found a little clumsy workaround, but it works!

When I was dealing with it, I found out that when you click on a pushpin, the map get centered properly. So I called a click event programtically after the map loading and immediately closed the InfoWindow. So the map gets centered and user can not notice of it.

I called the event like that:

GEvent.trigger(gmarkers[0],"click");

gmarkers[0].closeInfoWindow()

This worked for me.

Hi Guys, for future reference I got this working I added the following line of code at the end of the script. Please note that just the cmap.checkResize() didn't work by itself.

window.onload=function(){window.onload;map.checkResize()}

Thanks for your help on this

Did you solve the problem with the gap in the tab header? I noticed the same thing when I copied the GIFs from the toolkit sample. I think I found a solution but I don't understand why the gap happens when I am using the same CSS as the sample.

I changed the following line:

.ajax__tab_tectrack.ajax__tab_outer {padding-right:4px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}

to

.ajax__tab_tectrack.ajax__tab_outer {padding-right:0px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}

and the gap is gone...