• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1266
  • Last Modified:

Programmatic rendering of the tab control does not show the tab styling

Hi Guys,

The following code does not render the styles of the tab.
They look like hyper link but works a tabs.

public AjaxControlToolkit.TabContainer CreateWorktabs()
AjaxControlToolkit.TabContainer TabContainer = new AjaxControlToolkit.TabContainer();
AjaxControlToolkit.TabPanel TabPanelWorks = new AjaxControlToolkit.TabPanel();
AjaxControlToolkit.TabPanel TabPanelRequest = new AjaxControlToolkit.TabPanel();
AjaxControlToolkit.TabPanel TabPanelTasks = new AjaxControlToolkit.TabPanel();
 TabContainer.Width = Unit.Pixel(700);
TabContainer.Height = Unit.Pixel(540);

TabContainer.CssClass = "ajax__tab_xp";
//TabContainer.Attributes.Add("Style", "strstyle");
// TabContainer.Attributes.Add("CssClass","ajax__tab_xp");
TabContainer.BorderStyle = BorderStyle.NotSet;
TabContainer.ActiveTabIndex = 2;

TabPanelWorks.HeaderText = "Works";
TabPanelWorks.ID = "tabPanelWorks";
TabPanelRequest.HeaderText = "Request";
TabPanelRequest.ID = "TabPanelRequest";
TabPanelTasks.HeaderText = "Task";
TabPanelTasks.ID = "TabPanelTasks";
return TabContainer;
  • 3
  • 2
1 Solution
Is the style sheet in which the css class you are attempting to use linked to the page where the tabs live?  Also, not sure if you meant to do this, but aren't the lines where you are adding the style attribute commented out?  Finally, I believe tabs are all rendered as links, so you may have another style for 'a' in your style sheet that is overriding the specific class you mention in the code.  I think 'a' modifiers are last in the hierarchy so they will override any specific classes assigned.

For example:

a { color:red }
.mystyle { color:blue }

will render a red link if 'mystyle' is applied to a hyperlink, where:

a { color:red }
.mystyle a { color: blue }

would render a blue link.
FunCoderAuthor Commented:
//TabContainer.CssClass = "ajax__tab_xp";
            //TabContainer.Attributes.Add("Style", "strstyle");
was commented out cos I tried it
I added  .a tag stuff as well

Okay, if you have the toolkit installed where you are deploying or testing, it should have a default stye sheet which is probably not getting picked up by your page.  http://ajax.asp.net lists the default styles in here: AjaxControlToolkit\Tabs\Tabs.css.  You'll want to ensure that the default styles for the tab controls are incorporated into your own style sheet if the toolkit css is not included in your deployment.
FunCoderAuthor Commented:
It is almost working now except that, it only works when you refresh the page using F5.

FunCoderAuthor Commented:
It is almost working now except that, it only works when you refresh the page
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now