Monday, 26 February 2007

AJAX Tab panel bug

I had this code:-

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<asp:ScriptManager id="ScriptManager1" runat="server" >

</asp:ScriptManager>

<ajaxToolkit:TabContainer runat="server" ID="TabSelector" Height="150px">

<ajaxToolkit:TabPanel runat="Server" ID="Header" HeaderText="Header">

<ContentTemplate>

d

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="Server" ID="Lines1" HeaderText="Lines">

<ContentTemplate>

f

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="Server" ID="History1" HeaderText="History">

<ContentTemplate>

s

</ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

</asp:Content>
Which is simple enough and produced the following:-


However when I click on one of the tabs it all messed up:-

The problem was the ID I chose for one of the tabs. Header must be a reserved word - changing it fixed the problem.

Also you get no design time interface - everything has to be done in source view. Only way around this is to design everything in panels, then manualy add that into the source view.

BUT it does look nice, so will probably still use it:)

Ross

6 comments:

Anonymous said...

change ID="Header" to ID="Header1" and it works

Ross Dargan said...

Thats what I did:) - if you read the bottom part of the post I cover that:-

"The problem was the ID I chose for one of the tabs. Header must be a reserved word - changing it fixed the problem."

Ross:)

FeaturePics Images said...

I found a very easy tab content implementation at dynamicdrive.com

It took for me 1 hour to implement my image galleries.
The only thing I would doubt is "all pages are Fully unobtrusive, search engine friendly".
You can not set meta tags for your external pages.
So I have added direct links to the pages.
Image galleries with Ajax Tabs Content script:
http://www.featurepics.com/Editorial/ajax-tabs-content.aspx

Ross Dargan said...

What I really like about the asp.net ajax taps is they maintain the look and feel of windows tabs, but the ones on your site do look good.

Ross

Veer said...

Hey. I have a different problem, wondering if you've ever faced it. The tabs work fine on many of the pages I've used it on. However, in pop-up windows, the look of the tab gets messy. A white patch covers the bottom half of the tab header.

I've dug around a lot, but found no solution. I'm generally very good with CSS, javascript and stuff, but this one has me stumped. At first glance it seems to be some kind of a z-Index problem. Any help will be appreciated. Thanks.

Abby said...

Hi,

Have you tried adding a tooltip on the tabs? I did but the tooltip does not show up. perhaps you can help me on this. thank you.