Tab control and font size

it seems the Tab control resets (or resizes) all font sizes of elements within. If I set CssClass="" (empty that is) this bug goes away. I see with DOM explorer that Tab control defines it's own CssClass, can I access this somehow to change font sizes? Or should I do this manually for each content template?This may help:http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

Tab Panel, Update Panel, and TabOrder

I am having a problem with my update panel and tab panel where it will not recognize my form elements and let me tab to them.

I have an update panel that is a conditional update. When this is updated, it is making a tab enabled in the tabcontainer. (this is the second tab that is visible)

When this is done, I set the focus to the first form element (drop down list box) using the Script Manager.

The problem is when I tab, it goes directly to the address bar in IE 7.0. Even if I hit the tab several times, it will never come back to the drop down list even.

Now here is where it gets wierd. If I click the first tab and then go back to the second tab, I can hit the tab key and everything works right. Why would this be happening?

Thanks,

Keith

ok, I figured out what was happening.

I had a tab that was disabled for various reason.

one control on the tab was trying to show a modal dialog box. It was resulting in an error because the control wasn't passed back to the client. This caused all kinds of havoc apparently. I fixed this so that the control wasn't inappropriately calling the show modal dialog and all tabs were fine again.

TabContainer attributes

When attributes likeHightorWidthare modified declaratively, some elements like: <system.web.ui.control runat="server"> __designer:dtid="562949953421335" are added to the markup code, showing a the following message:system.web.ui.control is not supported.

How can I avoid this?

Thanks!

Same question here.

And how could you change the CssClass for the TabContainer. By default it is ajax__tab_xp. Are there alternatives and where are they stored?

I'm having trouble understanding the first question, could you provide more step by step details as to how to reproduce the error?

As to the second question, by setting the CssClass property on the Extender you can supply your own style. I have a task outstanding to put together more information on the css style guidelines for Calendar and Tabs. You can get a quick start by copying the .ajax__tab_xp style from the Tabs.css file in the sources and renaming it in your own stylesheet.

I also have the same problem as JavierH. Here's an exemple. This is what looks like one of my tab in the source code:

<ajax:TabPanel ID="Tab_BD" runat="server" ScrollBars="Vertical">
<HeaderTemplate>
Database
</HeaderTemplate>
<ContentTemplate>
<asp:UpdatePanel ID="UPBaseDeDonnees" runat="server">
<ContentTemplate>
<table cellpadding="0" cellspacing="0" Width="500px" height="300">
<tr>
<td>
<asp:CheckBoxList ID="chkListeBD" runat="server">
</asp:CheckBoxList>
</td>
</tr>
</table>


</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlUtilisateur" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="btnEnregistrer" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

</ContentTemplate>
</ajax:TabPanel>

Now in desing mode i put 500px as the width for the tab. Right after that if i look the code in the source it looks like this:

<ajax:TabPanel ID="Tab_BD" runat="server" ScrollBars="Vertical">
<system.web.ui.control runat="server">
Accès base de données
</system.web.ui.control>
<system.web.ui.control runat="server">
<asp:UpdatePanel runat="server" ID="UPBaseDeDonnees" __designer:dtid="281474976710764"><ContentTemplate __designer:dtid="281474976710765">
<table __designer:dtid="281474976710766" cellpadding="0" cellspacing="0" Width="500px" height="300">
<tr __designer:dtid="281474976710767">
<td __designer:dtid="281474976710768">
<asp:CheckBoxList __designer:dtid="281474976710769" ID="chkListeBD" runat="server">
</asp:CheckBoxList>
</td>
</tr>
</table>



</ContentTemplate>
<Triggers __designer:dtid="281474976710770">
<asp:AsyncPostBackTrigger ControlID="ddlUtilisateur" EventName="SelectedIndexChanged" __designer:dtid="281474976710771"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="btnEnregistrer" EventName="Click" __designer:dtid="281474976710772"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel

</system.web.ui.control>
</ajax:TabPanel>

Right now i'm using HTML table inside the tab control to set the Width and the height.

For the CSSClass. I have the same problem. If i tried to change the name of the CSSClass name all my code is modified with all those weird references.

Hey Ron,

WhatSianspheric has submitted is exactly what I got if I change almost any attribute declaratively, not to mention CssClass. So my question is how can I avoid having this extra code in my markup...?

Thanks!

More insite to the styling of the Tab Control will really be appreciated.

I have extracted the css file and acompaning images, modified them to my liking but still the Control will not use my styling.

Can anyne assist?

Anyone i've find a solution for this problem? I need to change the the CssClass of the tab control but it doesn't work at all.

Well I have the same problem and I'm not even touching the CssClass. Here's how I can reproduce it every time.

Start a new website using the Ajax template. On the default web page add a ScriptManager control and a TabContainer control. Add 2 TabPanel controls inside the TabContainer seeting only their HeaderText properties. Add <ContentTemplate> tags inside of each tab panel and put some text in each. If you run the solution everything works fine and you get the 2 tabs showing up. Close the browser window and in design mode, select the TabContainer and chnage any property even just the width or height. Switch to source code view and the <ContentTemplate> tags have been replaced with

<system.web.ui.controlrunat="server">

</system.web.ui.control>

Anyone got a clue what is causing this?

For what it is worth, I've seen this behavior also. Though if I avoid design mode it doesn't seem to happen.
I know this thread is kind of old but I thought I would add in my $.02. I was trying make the background transparent and got the same problem with the tags being changed thoughtout the source view when I moved the Tabs.css info over to my CSS file. I found that if I changed the CSSClass of the Container in the Source view and compiled I didn't get this problem. I am using AJAX 1.0 current release as of today.
That is good news DaManMP! How does the CSS for the Tabs look like in your CSS-file?

For what it's worth, I'm having exactly the same problems as the original poster(s) with the TabControl. I've also tried amending the CSS by following the instructions at the link below, but any changes made to the original values seem to just produce a complete mess. I'm not sure why this control seems so buggy, but I hope it gets fixed soon as it's a pretty basic requirement.

http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

Dont edit the design-mode attributes or it will mess up all the code...

Just change the attributes in the Source-mode...

I agree - do not use design mode!

In my case, I find that width = % is accepted but Height = % is not. What should that be?