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.
No comments:
Post a Comment