Showing posts with label run. Show all posts
Showing posts with label run. Show all posts

Wednesday, March 28, 2012

Tab Container and IE Scrollbars

I am looking for any guidance in resolving an issue that I have run into with the Tab Container. The page that is using this container cannot be navigated using the Browser Scrollbar by clicking on the bar and dragging or using the arrows. Navigation can be done by using the wheel on the mouse or by double clicking on a position on the scroll bar.

Any help is greatly appreciated.

Regards,

Mike

Hi Mrheihardt,

mrheinhardt:

The page that is using this container cannot be navigated using the Browser Scrollbar by clicking on the bar and dragging or using the arrows.

We cannot reproduce your issue. Here is my test sample and it works pretty well on IE 7 and Firefox 2.0.

<%@. Page Language="C#" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Tab1</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="900" Width="100%">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" >
<HeaderTemplate>
Tab2</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" Height="200" Width="100%" style="overflow:auto">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

</form>
</body>
</html>

Please compare my sample with yours. I use Ajax ControlToolkit V10618. If your version is lower, would you please upgrate it? In this sample ,I use a Panel to shown the content. If it doesn't work on your machine, please provide your sample and system environments here.

I hope this help.

Best regards,

Jonathan


I also face this problem under IE6. But it works fine under IE7.

Saturday, March 24, 2012

Tab panels header text cut off half way vertically

I have added on Tab Container which contain three panels. When I run the page, the header text of panel cuts of vertically, looks like a white bar on top of text. Any help will be highly appreciated.

Following is my code:

<div>
<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="pnlStoryList" runat="server" HeaderText="Story List">
<HeaderTemplate>
Story List
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td>
</td>
<td>
<b>Story Title</b>
</td>
<td colspan="3" align="center">
<b>Actions</b>
</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlOtherStory" runat="server">
<HeaderTemplate>
Other Stories
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td width="80%">
<b>Title</b></td>
<td width="20%" colspan="3" align="center">
<b>Actions</b></td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlSharedStory" runat="server">
<HeaderTemplate>
Shared Stories
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td width="85%">
<b>Title</b></td>
<td colspan="2" width="15%">
<b>Actions</b></td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>

Hu Bdimtiaz,

Please make sure your have use the right DOCTYPE. Here is the write example.

<%@. Page Language="C#" %>

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

If it is not the write direction, please feel free to let me know with a repro.

Best regards,

Jonathan


<cc1:TabPanel ID="pnlStoryList" runat="server" HeaderText="Story List">
<HeaderTemplate>
Story List
</HeaderTemplate>

You don't need a headertemplate when you use HeaderText.

Try removing either the headertemplate or the HeaderText property.

edit: I bet your symptom is causes by the css in your headertemplate that does not come from the default tabs css, but from the page, and therefore becomes too big.

With HeaderText the default css will be used and it should fit nicely.


Hi NNM,

I have tested it. The result is cotent inside <HeaderTemplate> will be shown as the HeaderText.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><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> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"><ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <HeaderTemplate>12123</HeaderTemplate> <ContentTemplate>13123</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </form></body></html>

You can test it . It works pretty well. Now , you can remove the DocType and have another test. You will find the real exact root cause.

Best regards,

Jonathan


Tested... True...

And my above post about css in headertemplate is wrong.

TabContainer - Two Components with the same id error

Hi. I've loaded the most recent AJAX Controls Toolkit and am using a TabContainer and TabPanels. I try to run a report from Oracle by clicking on an image button elsewhere on the screen, which should (and does) cause the report to be generated. It then is to switch TabPanels and show the report. At that point, I get:

Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'TabContainer1_TabPanel1' can't be added to the application.

I've researched on the forums and found a few proposed fixes to this issue. Unfortunately, none of them seem to work. Has anyone seen this with the TabContainer, and is there a fix? If I set debug=false in the web.config it goes away, but I realize that isn't truly a solution.

Regards,

Mark

Hi Mark,

I am having similar problem. My case was, I have a user control that contains MultipleSelectorExtender from ajax control toolkit. On my page, I need to hide and show this user control on a specific event. The first time I set the Visible property of this user control that contains the MultipleSelectorExtender, I am not getting any error. The next time that I attempted to set the visible property of the usercontrol to true, I got the error message "Sys.InvalidOperationException: Two componnents with same id '<multipleselectorextender's Id>' can't be added to the application."

It seems that the component was recreated again when the container wast set to visible.

Have you found solution to your problem? If so, kindly post it here.

tia,

/randz