.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

TabPanel 'bleed through'

Posted By:      Posted Date: October 08, 2010    Points: 0   Category :ASP.Net

Hey all,

 I was wondering if anyone has seen this issue before.  I have a page with a TabContainer and several TabPanels.  Each TabPanel contains a User Control.  Each of the User Controls in this case have a PlaceHolder used to hide/show some controls and below the PlaceHolder is a GridView.

When a user logs into the web site we will remove some of the tabs from view by setting TabPanel.Visible = false.  I have applied that patch to make the tab not display.  The problem is that I'm seeing some 'bleed' through.. if the user is on the 2nd tab and they click on the control attached to the PlaceHolder (causing the contents to be visible) they will end up seeing the contents of the user control from the 1st tab as well as the current tab.

Note that everything seems to be working fine as long as we dont remove some of the tabs from view..  Has anyone run into this one?



View Complete Post

More Related Resource Links

Ajax Tab: Each TabPanel with different Color



I have situation like, Each tab panel should display with different colors based on the status. Example:

Completed tabs should display in "Green"

Inprogress status tabs should display in "Red"

Not eligible status tabs should display in "Gray".

Ajax Tab look and feel is very good. So, thought of using the Ajax Tab for my above requirement. I tried to change it. But I am not able to change the color of the each tab.  

Is it possible to change the color of each tab in Ajax Tab control? Pleas help me.

If not possible, please suggest any other tab controls to achieve above my requirement.

Note:I already tried with IE tab controls, since it provides me that flexibility to change the color of the each tab. But, It is crashing my browswer. I am not sure about the reason.

I tried Jquery option, since I need to change the tab status dynamically based on the selection made in that same page, I am not able to achieve this one in the JQuery.

Issues with dynamically created TabContainer (Hide/Show TabPanel)


I have a web page that contains an UpdatePanel. In that panel, there is a TabContainer control that has 5 TabPanels, only the first one "Tab 1" will be displayed during initial page load. There is an Add button in "Tab 1", whenever it gets clicked, I will add (show) the next TabPanel (Tab 2, Tab 3, etc., all the way to Tab 5). "Tab 2" thru "Tab 5" contains a Close button that will close (hide) the current tab when clicked.

I'm doing all of these from code behind (dynamically create controls in Page_Init event and re-generate them during postback, track each TabPanel's content in a session variable, etc.), and everything seems to work just fine IF after adding several TabPanels, I remove  them in order (i.e. remove Tab 5 first, then Tab 4, Tab 3, etc.). It will NOT work whenever I try to remove a tab in the middle, then I will get all kinds of strange results.

I've attached the sample codes here for reviewing and testing. Any help is greatly appreciated.


==================== demo.aspx page ====================

<%@ Page

TabPanel and Section 508

Hi all.  I'm working with the AJAX Control Toolkit TabContainer/TabPanel.  I have a requirement to be compatible with Section 508.  I did a quick example for my client and they say that there are a couple of issues that will need to be overcome.  The issues that I am running into are:The headertext for the panels runs together when read by Jaws.The headertext for the panels does not display as clickable.The panels do not appear to be keyboard accessible.For item 3, I have tried the AccessKey property of the Panels.  Unfortunately, I don't see anything in the output that looks like the accesskey property is being generated in the output html.  I set the AccessKey property to 1, 2, and 3 for panel's 1, 2, and 3.On the headertext property, I am looking at the HeaderTemplate, but am not sure if that will help out.  Any ideas?If you have any thoughts on how to make things section 508 accessible with the TabPanel/TabContainer, I would appreciate hearing your thoughts.Wally

EXPERT: avoiding weird refresh behavior of Eval method in a tabpanel

I have this control in a detailsview:<asp:DropDownList ID="ddlEventStartDay" SelectedValue='<%#Cdate(Eval("startdate")).Day %>' CssClass="textbox" runat="server">    <asp:ListItem Value="1" Text="01" />    <asp:ListItem Value="2" Text="02" />    <asp:ListItem Value="3" Text="03" />    <asp:ListItem Value="4" Text="04" />    <asp:ListItem Value="5" Text="05" />    <asp:ListItem Value="6" Text="06" />    <asp:ListItem Value="7" Text="07" />    <asp:ListItem Value="8" Text="08" />    <asp:ListItem Value="9" Text="09" />    <asp:ListItem Value="10" Text="10" />    <asp:ListItem Value="11" Text="11" />    <asp:ListItem Value="12" Text="12" />    <asp:ListItem Value="13" Text="13" />    <asp:ListItem Value="14" Text="14" />    <asp:ListItem Val

Event on TabPanel

I'm using a TabContainer and it worked perfect until I needed a click event for a specific TabPanel.It's posible to set OnActiveTabChanged on the TabContainer, but I only want postback on one TabPanel.I searched for hours and found this solution: http://mattberseth.com/blog/2007/07/how_to_lazyload_tabpanels_with.htmlIs there a better/simpler solution for this?

Problem with displaying ASP.NET Tabpanel in IE 8

Hi out there!I need your help concerning the following issue: In past, i used ie6 for displaying my webapplication. Since i got to ie8 width of Tabpanel and position of right border changed. It doesnt matter, how the content looks like, the right border has a fix position and the content has to be scrolled in... Maybe there is someone who had experince with that kind of issue?Kind regards,eldorado2705

Exporting to PDF causes colors to bleed


I have a table with up to 30 columns that I turn visibility to hidden depending on a parameter.  For example if the parameter is 20 only columns 20 and below are shown.  Works a treat except when I export to a pdf and these grey spaces appear at the far right of the report.  The grey is the background color for the heading row and it bleeds down a column/s which would be to the right of the last column if it were shown.  Any ideas.  


Form insde a TabPanel and Tab order



I have a form I'm trying to insert inside a TabPanel. It's actually code PayPal gave me to insert a buynow button. The problem is that the form tags are causing my tabs to either have extra space on the bottom or top (depending on the tab) in IE. Firefox the problems do not happen and everythind displays correctly. Any idea how I can fix this in IE. It seams as if  IE is leaving part of the other tab visible if I have form tags in the TabPanel.

Table in ContenTemplate renders outside of TabPanel



I have a TabContainer with 3 TabPanels.  The container has a yellow background.  On the first tab the yellow background is the height of all the controls.  On tab 2 and tab 3 I just get a strip of yellow and then below that is my table of controls.  The controls are outside of the TabPanel border.  I checked the code and my table on each tab is between the <ContentTemplate> tags.  This was not doing this before.  This app is VS 2005 with Ajax Version=1.0.61025.0  All I have changed is installing VS 2010.   I even took an old backup and it's still doing the strip of yellow on tab 2 and tab 3.  I really don't want to upgrade.  Any help is appreciated. Here is my stylesheet:

/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* xp theme */
.ajax__tab_xp0 .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url("http://sitename/images/tab/tab-line.gif") repeat-x bottom; fon

Error with dyanamically Created AjaxControlToolkit TabPanel


I am getting an error in my application in  AJAXControlToolkit.ScriptControlBase.System.Web.UI.IPostBackDataHandler.LoadPostData. 

I am adding and removing tab panels based on user input data.  Sometimes the app creates 5 to 10 pannels and sometimes only 1 or 2 depending on the user input parameter.  The error occurs when the user input parameter dictates that 10 panels be created.  When the user then changes the input parameter to a selection that only requires 1 panel the error occurs and the error message refers to a parameter name :index with the specified argument out of range  It appears that is is still looking for the 10 panels created in the previous user selection.  The error message is in the Disassembly of the AJAXControlToolkit.  I thought maybe was linked to enableviewstate but I set this to false for the tabpanel and tabcontainer yet still get the error.



Change TabPanel HeaderTemplate style


The header text in the tab panel is too small and I wanted to make it bigger.  So I included a <span> within the <HeaderTemplate> tags and though the text is larger according to the style of the span it doesn't display properly because the height of the tab (not the panel but just the tab part that sticks above the panel) doesn't become any bigger and I don't see where I can modify this.

Can this be modified and if so how?



PopupControlExtender Not Working on TabPanel


I have two pages with TabControls and the tabcontrols have several tabpanels.  On one page there are some popupcontrol extenders on the first tab, and that page works fine. On the second page, the popupcontrolextenders are on the second tab.  When that page loads, I get the following jscript error:

Microsoft JScript runtime error: Sys.ArgumentException: Value must not be null for Controls and Behaviors.
Parameter name: element

I've tried setting the Enabled property to false for these popupcontrolextenders until that tab becomes visible.  This prevents the error on page load, but but then the same error happens as soon as that tab becomes visible.

Is it possible to use a popupcontrolextender on a tabpanel, or should I give up and try something different?


Tabpanel data lost


I have two tab panels and each tab panel has a text box.  When I move between the tabs, the data in the text boxes is lost.  What should I do to retain the data?

AJAX TabPanel content are always visibility:hidden, display: none on all but first tab


I am trying to use the TabContainer/TabPanel controls to create 3 tabs. The tabs themselves will always appear, however, only the first tab will ever display. When I look at the source of the page, I find that the 2nd and 3rd panels have style="visibility:hidden;display:none" on them. The only time this is not true, is if the content inside the tables is text that is on the source, nothing generated.

I have tried it using controls, repeaters, adding all my tabs dynamically, setting the properties of visibility=True and enabled=true. I am kind of pulling my hair out here.

ASPX coding:

<asp:TabContainer ID="aeDetails" runat="server">
<asp:TabPanel ID="placeholder" runat ="server" HeaderText ="PlaceHolder" ><ContentTemplate >Place Holder</ContentTemplate></asp:TabPanel>

VB.NET Code:

'   Get the content for the home page.
        '   get the announcements, if any
        '   get the events, if any


Using javascript in Tabpanel



I want to use javascript in Tabpanel.

like this:

<script type="text/javascript" language="JavaScript" src="JScripts/JsCalendar.js">


calling JavaScript from inside TabPanel


I had a standard ASP.NET page where I had a some client side Java script make some controls visible/enabled if a checkbox was clicked or not.


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script language="javascript" type="text/javascript" >
        function Email2Checkbox() {
            var checkbox = document.getElementById("<%=cbEmail2.ClientID %>");

            if (checkbox.checked == true) {
                document.getElementById("<%=lblEmail1.ClientID%>").disabled = false;
                document.getElementById("<%=dropEmailType_2.ClientID%>").disabled = false;
                document.getElementById("<%=lblEmail2.ClientID%>").disabled = false;
                document.getElementById("<%=txtEmail_2.ClientID%>").disabled = false;
                document.getElementById("<%=regexValEmail_2.ClientID%>").disabled = false;
            else {
                document.getElementById("<%=lblEmail1.ClientID%>").disabled = true;
                document.getElementById("<%=dropEmailType_2.ClientID%>").disabled = true;

Tabpanel visibility while printing.



For a website I was asked to put a bunch of information inside a few different categories. The tabpanel seemed fitting for this, and the person I made it for approved of the simple and elegant sollution.

However, he now has a somewhat tricky request: he wants it so that when people print (javascript::print()), they would be able to see all the information entered in the different tabs.
Normally I would solve a thing like this with a different print rules inside my css file. However, in this case, the javascript attached to the tabcontainer/tabpanels puts the visibility:hidden on the elements themselves, meaning whatever I may write inside the css would be ignored either way.

Is there any simple way of making it so that these tabs will be shown when printing?
Preferably a sollution that doesn't require me to rewrite most of the tabcontainer/panel code or making my own control from scratch.
I would think that this "should" be achievable through javascript, but I thought I'd check here for ideas before rushing into things.

Thanks in advance for any help you may give me.

ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend