Tab Container Custom Style in Firefox...

Hi,

I am using a TabContainer with a custom CSS file. I have copied the original CSS file and have modified it a little. Here is the CSS I am using:

/* xp theme */

/* Our Additions */

.StpAjaxTab

{

margin-left:auto;margin-right:auto;

}

.StpAjaxTab.ajax__tab_header

{

font-family:verdana,tahoma,helvetica;font-size:11px;

/* Our Additions */

border-bottom:solid1px#000000;text-align:left;

}

.StpAjaxTab.ajax__tab_outer

{

padding-right:4px;height:21px;

}

.StpAjaxTab.ajax__tab_inner

{

padding-left:3px;

/* Our Additions */

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_tab

{

height:13px;

padding:4px;

margin:0;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_inner

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_active.ajax__tab_inner

{

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_body

{

font-family:verdana,tahoma,helvetica;

font-size:10pt;

border:1pxsolid#999999;

border-top:0;

padding:8px;

background-color:#ffffff;

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;border-top:none0px;

}

I am using the TabContainer with the CssClass like this

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<ajax:TabContainerID="TabContainer"runat="server"Width="750px"Height="200px"meta:resourcekey="TabContainer"CssClass="StpAjaxTab">

<ajax:TabPanelID="AlleTrefferTabPanel"runat="server">

<HeaderTemplate>

<asp:UpdateProgressID="UpdateProgress"runat="server">

<ProgressTemplate>

<asp:ImageID="ProgressImage"runat="server"ImageUrl="~/Images/progressIcon.gif"Width="16"Height="16"/>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:LabelID="AlleTrefferLabel"runat="server"Visible="false"Text="Alle Treffer"meta:resourcekey="AlleTrefferLabel"></asp:Label>

</HeaderTemplate>

<ContentTemplate>

Content, you may place a button to generate a partial postback...

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

 
</ContentTemplate>
</asp:UpdatePanel>

If you try this out, you will see, that it will see that it works perfectly on IE. But on firefox, when a partial postback is generated, the tab headers' positions are not as they have to be.

After a partial postback has been generated, the tabs are not moving back to their original position. So the question is simple. How can I get the TabContainer in firefox behave exact like in IE?

I tried to change the css styles, but it doesn't worked.

Thanks for help,

bye...

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien

Tab control style

hi

i want to override the default style of tab control.i copied the Css file from this linkhttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

to a css file and set the tab container's css file to the new class name but this added some code in aspx page

<

ajaxToolkit:TabContainerID="TabContainer1"runat="server"CssClass="ajax_def_tab"><ajaxToolkit:TabPanelID="general"HeaderText="General "runat="server"><system.web.ui.controlrunat="server">

<div__designer:dtid="1688854155231235"id="DivGeneral"><asp:Panelrunat="server"GroupingText="General"Font-Size="10pt"Font-Names="Verdana"Height="50px"ID="Panel1"__designer:dtid="1688854155231236"><table__designer:dtid="1688854155231237"cellpadding="0"cellspacing="2"border=0class="label"width=100%><tr__designer:dtid="1688854155231238"><td__designer:dtid="1688854155231239"nowrap>First Name:</td><td__designer:dtid="1688854155231240"><asp:TextBoxrunat="server"BorderWidth="1px"Width="184px"ID="TextBox1"__designer:dtid="1688854155231241"></asp:TextBox>

</

td><td__designer:dtid="1688854155231242"nowrap>Last Name:</td><td__designer:dtid="1688854155231243"><asp:TextBoxrunat="server"BorderWidth="1px"ID="TextBox2"__designer:dtid="1688854155231244"></asp:TextBox>

</

td><td__designer:dtid="1688854155231245"nowrap>Middle Name</td><td__designer:dtid="1688854155231246"><asp:TextBoxrunat="server"BorderWidth="1px"Width="112px"Height="16px"ID="TextBox3"__designer:dtid="1688854155231247"></asp:TextBox>

</

td>

any help??

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

-Damien

TabContainer and DynamicServicePath

I am using a TabContainer and I would like to display the content of an aspx file inside each TabPanel of the TabContainer. I tried this code :

<ajaxToolkit:TabContainerrunat="server"ID="Tabs"Height="600px"Width="600px">

<ajaxToolkit:TabPanelrunat="server"ID="Panel1"HeaderText="Product Groups"DynamicServicePath="~/ConfProductGroup.aspx"Visible="true">

<ContentTemplate>

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelrunat="server"ID="Panel3"HeaderText="Products"DynamicServicePath="~/ConfProduct.aspx"Visible="true"/>

</ajaxToolkit:TabContainer>

But the tabcontainer doesn't display the content of aspx pages (ConfProduct.aspx , ConfProductGroup.aspx) when I click on a TabPanel.

Hi Suzi,

If you want to contain an entire asp.net page inside a TabPanel, you will probably need to fetch it prgramatically.

This video will show you how to do it.

http://asp.net/learn/videos/view.aspx?tabid=63&id=120

Joe

Thank you Joe for your advice. I am trying to test with this solution.

I am trying a sample example as you advice me. I have a Master page and an aspx page named Ajaxtab.aspx. I have no error when I test the Ajaxtab.aspx without a Master Page File. But if I add a master page file. I have an unknown error . Below, you will find my code. Thank you.

ajaxtab.aspx :

<%@.PageLanguage="C#"AutoEventWireup="true"MasterPageFile="~/Site.master"CodeFile="Ajaxtab.aspx.cs"Inherits="Tests_Ajaxtab"Title="MediterrumWorks : Ajaxtab" %>

<%@.MasterType

virtualpath="~/Site.master" %>

<%@.Register

Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %>

<asp:Content

ID="MainContent"

ContentPlaceHolderID="MainContent"

Runat="Server">

<divid="ResultId0"style="background-color:Aqua;"/>

</asp:Content>

and my master page :

<%@.MasterLanguage="C#"AutoEventWireup="true"CodeFile="Site.master.cs"Inherits="Site" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<title>Mediterrum Works</title>

<linkrel="stylesheet"type="text/css"href="ajax__calendar.css"/>

</head>

<body>

<scripttype="text/javascript"language="Javascript">

function showHideLogo(){

var topbanner=window.document.getElementById('topbanner');

var arrow_top=window.document.getElementById('arrow_top');

if(topbanner.style.display=="none"){

topbanner.style.display="block";

document.images["arrow_top"].src="images/top_arrow_hide.gif";

document.images["arrow_top"].style.height="7px";

}else{

topbanner.style.display="none";

document.images["arrow_top"].src="images/top_arrow.gif";document.images["arrow_top"].style.height="7px";

}

}

function updateTime()

{

var label = document.getElementById('<%= CurrentTime.ClientID %>');

if (label) {

var time = (new Date()).localeFormat(" d/MM/yyyy ");var time = time +" " + (new Date()).localeFormat(" HH:mm ");

label.innerHTML = time;

}

}

updateTime();

window.setInterval(updateTime, 1000);

// Select a collection of CheckBoxList clicking on a CheckBoxList

function SelectAllCheckboxes(spanChk, chbxID)

{

var theBox= (spanChk.type=="checkbox") ? spanChk : spanChk.children.item[0];

xState=theBox.checked;

elm=theBox.form.elements;

for(i=0;i<elm.length;i++)if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)

{

var checkbox = elm[i];

// If a search parameter was passed in

if(chbxID)

{

// Check only thos checkboxes with an ID containing that parameter

if(checkbox.id.search(chbxID) != -1)

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

// No search parameter, just check all checkboxes on the form

else

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

}

</script>

<divid="container">

<formid="navtop"

runat="server"

style="margin: 0px">

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferencePath="WebRequest.js"/>

</Scripts>

</asp:ScriptManager>

<asp:HiddenFieldID="aspHFvisible"Value="true"runat="server"/>

<divid="topbanner">

<tablecellpadding="0"cellspacing="0"border="0"width="100%">

<tr>

<td>

<img

src="images/TerrumWorks.gif"

alt="Semantic Solutions"

style="margin: 0px"/>

</td>

<td>

</td>

<tdstyle="text-align: left">

<imgsrc="images/userOnline.gif"height="16px"width="16px"alt=""/>

<asp:LoginName

ID="LoginName2"

runat="server"/>

</td>

<tdstyle="text-align: right">

<asp:LoginStatus

ID="LoginStatus2"

runat="server"

LogoutAction="RedirectToLoginPage"/>

</td>

</tr>

</table>

</div>

<divid="div-menu">

<tablecellpadding="0"cellspacing="1"border="0"width="100%">

<tr>

<td>

<asp:UpdatePanelID="aspUpdPanGeneralMenu"runat="server">

<ContentTemplate>

<asp:Menu

DataSourceID="SiteMapDataSource1"

ID="Menu1"

runat="server"

CssClass="navmenu"

Orientation="Horizontal"

StaticTopSeparatorImageUrl="~/images/ToolSep.gif"OnMenuItemClick="Menu1_MenuItemClick">

<StaticMenuItemStyle

CssClass="menuitem"/>

<StaticSelectedStyle

CssClass="menuselected"/>

<StaticHoverStyle

CssClass="menuitemhover"/>

<DynamicHoverStyle

BorderWidth="1px"

CssClass="menuitemhover"/>

<DynamicMenuItemStyle

CssClass="menuitem"/>

</asp:Menu>

<asp:SiteMapDataSource

ID="SiteMapDataSource1"

runat="server"

ShowStartingNode="False"/>

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

</div>

<divid="toolbar"style="clear: both">

<tablewidth="100%"cellpadding="0"cellspacing="1">

<tr>

<tdalign="left"width="15%"style="border:solid 0px black">

<asp:UpdateProgressID="aspUpdProg"runat="server">

<ProgressTemplate>

<table><tr><td>

<imgalt="Please Wait"height="13px"src="images/progressbar_long.gif"/>

</td>

<td>

<asp:Labelrunat="server"Text="Loading ..."/>

</td>

</tr></table>

</ProgressTemplate>

</asp:UpdateProgress>

</td>

<tdalign="left"width="35%"style="border:solid 0px black">

<asp:contentplaceholder

id="ContentPlaceHolderToolbar"

runat="server">

<asp:UpdatePanelID="aspUpdToolBarMessage"UpdateMode="Conditional"runat="server">

<ContentTemplate>

<asp:Image

ID="imgErrorMessage"

runat="server"

ImageUrl="~/images/red-error.gif"

Visible="True"Height="12px"/>

<asp:Label

ID="lblErrorMessage"

runat="server"

Visible="True"

CssClass="ErrorMessage"/>

<asp:Image

ID="imgLblMessage"

runat="server"

ImageUrl="~/images/info.gif"

Visible="True"/>

<asp:Label

CssClass="Message"

ID="aspLblMessage"

runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

</asp:contentplaceholder>

</td>

<tdalign="center"width="25%"style="border:solid 0px black">

<imgid="arrow_top"onclick="showHideLogo()"alt=""height="7px"src="images/top_arrow_hide.gif"/>

</td>

<tdalign="right"class="rightTable"width="25%"style="border:solid 0px black">

<spanid="CurrentTime"runat="server"class="toolbartime"/> |

<asp:Label

ID="AppVersion"

runat="server"

CssClass="toolbarversion"/>

</td>

</tr>

</table>

</div>

<divid="content">

<!-- Starting region layout for Sample Window -->

<asp:contentplaceholder

id="MainContent"

runat="server">

</asp:contentplaceholder>

<!-- Ending region layout for Sample Window -->

</div>

</form>

<divid="footer">

<tablewidth="100%"border="0">

<tr>

<td>

<address>

<asp:Literal

ID="footeraddress"

runat="server"

Text="<%$ Resources:Resource, FooterCopyright %>">

</asp:Literal></address>

</td>

<tdalign="right"valign="bottom">

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

Hi,

I can't see where in your page is implementing incremental page.

Can you watch the video again and implement a similar feature?

If it still fails, can you provide a simpler page with less elements but include the problem you have?

Additional tip, you can useiFrame to include another form in current page.