Hi
I have to develop Tab Menu in Asp.net and I want to fire client Side Onclick event. So could you please suggest me which control can I go for?
Mostly the tab menu design will be same as Infragistics community Header, but it's One level right now.
I will appreciate If you provide any sample Tab menu.
Thanks
Anil Kumar
Hello Anil,
I recommend you to use our WebTab control that accomidates your needs.
To know more about WebTab, please refer to the following links.
Getting started with WebTab
http://help.infragistics.com/NetAdvantage/ASPNET/2011.1/CLR4.0/?page=WebTab_Getting_Started_with_WebTab.html
Using WebTab
http://help.infragistics.com/NetAdvantage/ASPNET/2011.1/CLR4.0/?page=WebTab_Using_WebTab.html
Samples browser
http://samples.infragistics.com/aspnet/ComponentOverview.aspx?cn=tab
Please let me know if I can provide any further assistance regarding this matter
You are response came bit late because I have already developed the Tab Menu using WebTab control. You are response helped me create better Tab Menu.
But I have stuck in between few design issues which I need your help.
1) I am not able to apply a theme to my Tab menu. Please provide me a sample applying a Theme.
2) Critical problem is I have set the WebTab Width to "100%". But it crossing my web browser width. I have attached the code and screenshot below.
Code id below:-
<table width="100%" style="height: 100%;" border="1"> <tr> <th class="header" style="height: 46px;" align="left" valign="top"> <img alt="Credit Suisse Logo" src="Images/Logo.PNG" id="global_logo" style="visibility: visible; vertical-align: top; text-align: left; table-layout: fixed; background-color: transparent;" height="100%" /> <font size="4px" color="white" style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; position: relative; top: 15px; right: -5px; text-align: center"> Mix Analytics</font> </th> </tr> <tr> <td style="height: 94%; text-align: left; vertical-align: top;"> <ig:WebTab ID="WebTab1" runat="server" DisplayMode="Scrollable" Height="100%" BackColor="#A8C6DB" Font-Bold="True" Font-Size="Smaller" ForeColor="#3366FF" SelectedIndex="0" Width="100%"> <%--1889px--%> <Tabs> <ig:ContentTabItem runat="server" Text="Dashboard" TabSize="150px" MarginLeading="1" AutoSize="True" > <Template> <iframe id="Iframe1" src="http://www.google.com/" style="height: 100%; width: 100%; text-align: left; vertical-align: top; border: 0;" > </iframe> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Reporting" MarginLeading="1" AutoSize="True" TabSize="150px"> <Template> <iframe id="frameUrl" src="http://forums.infragistics.com/silverlight/default.aspx" style="height: 100%; width: 100%; text-align: left; vertical-align: top; border: 0;"> </iframe> </Template> </ig:ContentTabItem> </Tabs> <%-- Enable Tab moving feature.--%> <TabMoving Enabled="false" /> <%--Enable close buttons for the tabs.--%> <%-- <CloseButton Enabled="True" />--%> <ContentPane AutoSize="True"> </ContentPane> </ig:WebTab> </td> </tr> </table>
Hi Anil,
I reproduced that in IE6 within IETester and recalled about similar issue with IE, when WebTab was located in table without width. The WebTab cannot fix that specific problem for that specific scenario of IE6 without destroying default functionality for standard browsers. So, application should find a way around.I can suggest you one of the following:
1. Remove WebTab from table/td which have undefined widths or 100%
2. Remove DisplayMode="Scrollable"
3. Open ig_webtab.css used by application (ig_res/default or similar directory).Find igtab_THScrollButtons class.Replace width:9999px; by width:100%;
4. Same as above, but within tab properties.Inside of HEAD tags add following:<style type="text/css">.widthFix{width:100%}</style>Inside of WebTab tags add following:<CssClasses TabsHolderInnerWithScrollCssClass="widthFix" />
Hi Viktor,
Thanks for your reply.
Whatever you suggested I now very well and it is 100% true.
Could you please try with following conditions.
1) Internet Explorer 6.0.2900
2) Screen resolution 1900 by 1200 pixels.
3) Firefox 6.0.2 [here completely different issue. Height is reduced.]
I am 100% sure that you can replicate the issue. Even you can look at the screenshot attached in previous thread.
Please suggest me a solution.
I created an empty form in a website, copied/pasted your codes, added ScriptManager and viewed page in browser. I did not find any problems with width. Table with WebTab were stretched to the width of browser and table with WebTab were resized with browser correctly.
In order to stretch height application should set strict px value to container of WebTab or it should ensure that absolutely all containers of WebTab have specific heights. Those heights can be %, but all of them should be defined. That includes not only possible DIV container (can be used as contents of master page), but also it should include form, body and html objects as well.You may use something like<style>body, html, form { height:100%; }/* however, it is better to use not 100%, but something like 98..99% */</style>
Also you should keep in mind, that if you use %, then that does not include possible border and padding of child. For example, if container has width=200px and height 100px (or % values) and child has style defined aswidth:100%; height:100%; border:5px; padding: 10px;then overall width of that child will be 230px and height will be 130px. If application wants to use width/height as % and to have size of child to match with size of parent, then unfortunately it is only possible without dynamic calcultions in javascript. Application also may use approximate values, for example,width:92%; height: 87%;
Hi,
Could you please respond to my previous thread. Because the Asp.net Webtab control is not taking the width in percentage.
Problem:-
I have set the WebTab Width to "100%". But when I browse the application it crossing my web browser width. I have attached the code and screenshot previous thread.