Tab Container Height

This is more of a display question than anything, but I wasn't sure where else to ask, so here goes :)

I've got 2 table cells right next to each other. One of them is much taller than the one that has my tab container in it. Is there a way I can programatically set the height of the tab control so that it's forced to be as tall as the other table cell? Or heck, if it could just fill up the cell it's in, that'd be fine.

Any help is appreciated, much thanks!

-- Dan

Use the height attribute.

rpack79:

Use the height attribute.

How can I apply the height attribute dynamically based on the size of the cell next to it? I can't assign a height in pixels to it, everything is sized to scale.

Post your code and I'll show you.

How about using % instead of px.

Tab Control

Does anyone know how to make the tabs on a TabControl that comes with the Ajax control toolkit to display its tabs on multiple rows and not just on one long row?

Thanks in advance

your're not the only one... vote here!

http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8843

Cheers!

Thanks. Hope we get the feature Soon!

tab control and modelpopup

In my form aspx page, I have three panels, top of the page I have three input buttons controls how I display my panels, first button display panel1(hides panel2 and 3) , second button displays panel2(hides panel1 and panel3), third panel display panel3(hides panel1 and 2).

Only thing is, panel2 has one small subpanel and datagrid in it that for datagrid, I put a modelpopupextender , because I wanted when user clicks linkbutton inside the datagrid, I make modelpopup pops. That means it I have update panel inside the Panel2 already.

I have tried some javascript functions for displaying/hiding my panels when buttons are clicked, but I needed also for panel2 when user saves datagrid, page refreshes and needs to comes back to show panel2 again,it was keep showing panel1, I put some javascript for that would remember last button clicked, so could come back that one, but that gives me some problem, so maybe I should try Ajaxs Tab , but I get confused how would I set up that, because I already have updatepanel inside the panel2 for modelpopup, so how would I can put tab control for whole form? Would it effect Tab and modelpop up together ?

Any suggestions?

Hi,

I agree your idea of trying to use TabContainer control. With it, you don't need to worry about keep its state between postbacks.

For more information about how to use it, I'd suggest downloading the sample web sitehere and try the tabs page.

Tab Control and URL Frame with IE

I have a custom who is using a URL frame to display a page I created with the Ajax Tabcontainer. The page works fine when accessed directly and works fine in Firefox, however in IE 7 when accessed thru the url frame you can't click on any tab to activate and when you rollover the tab it throughs an exception saying access is denied.

Anyone have any ideas how to work around this, or any fixes?

After many searches I found this: http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Which fixes the issue.

After many searches I found this: http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Which fixes the issue.

Tab Control doesnt display correctly within User Control

I've tried searching for answers to this but the search facility seems to not be working at the moment, so please forgive me if there are similar posts in here somewhere which I just can't see.

I don't know whether I'm the only person here trying to use these controlkit controls inside my own user controls, but it seems that every time I try I get mysterious problems! I'm dynamically adding Tab Panels to a Tab Container in the Container_Init function. This works beautifully in a straight aspx page, but as soon as I place the Tab Container within an ascx page, I get little white blocks appearing at runtime in front of each Tab "header" area, starting about halfway down each one and slightly offset to the left, so that only the top half of the tab header text is visible. Also there is a solid line (albeit with a tiny gap at the right-hand end) between the active tab header and the corresponding panel, so there is no sense of the header belonging to the active tab.

Any hints anyone?

_Ade.

Well I won't say I've "solved" this problem, but I have come up with a totally bizarre workaround.

By dint of tediously commenting out each element of the supplied css class line by line and rebuilding, I finally realised that the defaultajax__tab_tabclass has a hard-coded height of 13px, and in the specific case where the tab container is contained within a user control, increasing this height to 21px fixes the problem!

Does anyone know what this is all about? Will it come back and bite me again when it wakes up?

_Ade.

Try add the following to your user control:

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

Good luck.

I added the line and it makes no difference. Unless I change the ajax__tab_tab class Height from 13px to 21px it doesn't display correctly.

_Ade.

Where did you add it to? Try to add it to the page consuming the user control to see if works.

Yep, it worked!

10xvljw8202.

Well actually, it did fix the tab display, but it screwed up the formatting of the rest of the page and every other page in my application!

I'm sticking with resetting the css file to 21px height.

_Ade.

Please help !

I have set the height as 21 px as mentioned, but the tags are still broken.

Is there anybody experience the same problem?

Thanks

Found out the solution finally.

I put the code "<script language='Javascript'>window.resizeTo(screen.width,screen.height); self.moveTo(0,0);</script>" on aspx.vb file.

In order to solve the broken tags problem. remove the code from .aspx.vb file, and put them into .aspx file.

I hope it helps.

tab panel display problems

I am using a tab container with tab panels. The first problem is that the headers have the bottom half cut off. The second problem is that the panel will not render with the backcolor I specify. The third problem is that the panels have dynamic content that includes a button which launches a second window. When you click on the button all the information is cleared from the panels.

Hi

Would you please post some code?

Thanks

Try add the following to your aspx page:

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

Good luck.

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.

TabContainer Enabled or Visible

Hi,
I have a Tabcontainer using 3 TabPanels. "Identity", "Invoices","stats".

I need to display the Invoices and Stats panels only when the Identify is on Update mode (the other status could be Create).
So I set the value of Visible property for these panels to False.
I don't have the css design Panels but the HeaderTexts are displayed.

I tried with the Enabled property, I get the same problem.

And by the way, what is the difference between Enabled and Visible for the TabContainer Control ?

Thanks for your help

Stan

Do you have to use this

TabContainer1.Tabs(1).Enabled =False

is work fine...

Hi Stan,

Here is a sample. It controls the HeadText at the client side. It's very simple and should be extended in your usage!

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TabTest.aspx.cs" Inherits="TabTest" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Text="Label" Width="141px"></asp:Label><br /> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Identity"> <ContentTemplate> 1111111<br/> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Invoices" Visible="false"> <ContentTemplate> 222222<br/> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="stats" Visible="false" Enabled="false"> <ContentTemplate> 333333<br/> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, e){var tab1ID = "<%= this.TabContainer1.Tabs[1].ClientID%>";var tab2ID = "<%= this.TabContainer1.Tabs[2].ClientID%>";if(typeof(eval("document.all."+tab1ID))=="undefined"){ eval("document.all.__tab_"+tab1ID).innerHTML="";}if(typeof(eval("document.all."+tab2ID))=="undefined"){ eval("document.all.__tab_"+tab2ID).innerHTML="";}//alert(eval("document.all."+tab1ID))});</script> </form></body></html>

Difference between Enabled and Visible(We assume both of them are set to false):

1、Effect: Visible="false" HeadText is shown.

Enabled="false" HeadText isn't shown.

2、Client Code Visible ="false"

No

Enabled="false"

Sys.Application.add_init(function() { $create(AjaxControlToolkit.TabPanel, {"enabled":false,"headerTab":$get("__tab_TabContainer1_TabPanel3")}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel3"));}); 3、Source code:if (!this._enabled) { this._hide();

}

_hide : function() {
this._tab.style.display = 'none';
if (this._get_active()) {
var next = this._owner.getNearestTab(false);
if (!!next) {
this._owner.set_activeTab(next);
}
}
this._deactivate();
}

For more details , please research this files: Tab.js, TabPanel.cs ,TabContainer.cs.

Hope it helps . If i misunderstood you, please let me know.