Wednesday, July 9, 2008

Ajax control toolkit Tab container header display issue with moss

Using Ajax is very complicated.
And when it comes with SharePoint than nothing worst like that.

Recently we are starting implementing ASP.NET AJAX with SharePoint.
And while implementing we came to know that we were wrong.
Its more challenging then what we are thinking.

Here I am explaining a problem with Ajax control toolkit’s Tab Container.
While implementing we came to know about this header display problem.

We are getting header text of the tab is only half. Other half is not displaying.
Than after googling we came to know that this is known issue.

But even after searching for 4 hours we are not getting the except problem solution for moss.
So I found that the same problem is in DNN(Dot Net Nuke) also.
and found an article how to solve it in DNN here

The only thing you have to do is that.

Add following style in you webpart.
<style type="text/css">
.ajax__tab_xp .ajax__tab_tab {
height: 21px;
}
</style>


I tried it in my webpart in MOSS.
And BINGO.

So enjoy the AJAX.

22 comments:

Anonymous said...

Thanks!!!!!

Anonymous said...

Thanks, you save the day :D

squeeks said...

Works Perfect Now


Thanks

Anonymous said...

It works perfectly, thanks

Anonymous said...

Hey, I am getting the tab but my tabs aren't clickable in my webpart can you please advice what I am doing wrong...

Regards,

SharePoint Kings said...

Wow, Please check some ajaxtoolkit installation,style and JavaScript . that might be problem other wise click is always enable.

ahmedsobhy852002 said...

Hi every one my task is very smiler to that post but my problem is how to deploy Tab control to my sharepoint site i try a lot but failed i use VS2008 and sharepoint 2007 and i did all modification in web.config but failed
Any Help.....

Anonymous said...

Hi, thanks for this info.

It works fine until I do a post back and then the webresource.axd overrides my css so the height goes back to the old measurement. Any ideas how I can prevent this from happening?

Cheers!

SharePoint Kings said...

webresource.axd is error regarding wrong configuration of ajax.

configure ajax again.

not related to CSS mentioned here.

SharePoint Kings said...

ahmedsobhy852002,

there might be so many reason why ajax will not work in sharepoint

simple search on google with and configure ajax again with different like that you had used previously

jasco said...

you RULE!!!

Youdhbir said...

Hi Ahemed,

Try to create a user control and use AJAX tab control inside it.
Using SmartPart (from Codeproject) or generic smart part you can deploy it to sharepoint web pages.
Enjoy!

Youdhbir.

SharePoint Kings said...

Thanks Youdhbir.

babu said...

hi i am new to diz blog & new to sharepoint .now i have a requirement in such a way that i want to use ajax tab container but shareoint is not supporting directly....so please can u tell me the procedure and how to build tab container in sample page with sharepoint site....
plz respond ...it's a urgent requirement...
hope for responce ...
by
babu

SharePoint Kings said...

babu,

you can search google how to configure ajax with sharepoint and after that there is a problem with ajax tab control which you can solve with this article.

Thanks,
Sharepoint Kings

Anonymous said...

Sharepoint Kings,

If I put the tabcontainer in a update panel and click a button to perform the pose, the problem occurs with the tab headers again. Is there any way around this?

Allan

SharePoint Kings said...

@Anonymous (Allan),

it should work just check in view HTML that style is rendering properly.

Vakhtang said...

Thank you!

Dinesh said...

Thanks, Worked as expected.

Monu said...

Hello, i tried but doesnot work. Its working while previewing the webpart. But when adding the webpart the tab strucutre doenot occr. How to resolve

SharePoint Kings said...

Monu,
Can describe your exact error?

Binish said...

Hi, I followed your step but still the heder text is showing half. When checked it using IE developer tool bar in IE 7, the class applied to it is ".ajax__tab_tab" not ".ajax__tab_xp .ajax__tab_tab".

Any idea?




Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com