Infragistics Team,
I am using the WebTab control (v16.2) in our application. Here below is the WebTab control defined in the .ASPX page.
<AAI:WebTab id="PageTab" runat="server" Height="280px" DESIGNTIMEDRAGDROP="833" DisplayMode="Scrollable" Width="940px" TabOrientation="Horizontal" TabLocation="TopLeft" VisibleHeader="true"><Tabs><ig:ContentTabItem Text="@NETWORK@" Key="Network" AutoSize="True"><Template><ASP:ContentPanel id="pnlNetworkInfo" runat="server" Width="624" Height="69px"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@FOCUSES@" Key="Focuses" AutoSize="True"><Template><ASP:ContentPanel id="pnlNetworkFocuses" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@PROVIDER@" Key="Provider"><Template><ASP:ContentPanel id="pnlProvider" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@GROUPPRACTICE@" Key="GroupPractice" AutoSize="True"><Template><ASP:ContentPanel id="pnlGroupPractices" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@FACILITY@" Key="Facility" AutoSize="True"><Template><ASP:ContentPanel id="pnlFacility" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@PLAN@" Key="Plan" AutoSize="True"><Template><ASP:ContentPanel id="pnlPlan" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@NOTES@" Key="Notes" AutoSize="True"><Template><ASP:ContentPanel id="pnlGPNote" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@USERDEFINED@" Key="UserDefined" AutoSize="True"><Template><ASP:ContentPanel id="pnlUserDefined" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem><ig:ContentTabItem Text="@ASSOCIATEDMOS@" Key="AssociatedMOS" AutoSize="True"><Template><ASP:ContentPanel id="pnlAssociatedMOS" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup"><!-- HTML table with other controls defined //--></ASP:ContentPanel></Template></ig:ContentTabItem></Tabs></AAI:WebTab>
When ran the application, the WebTab control displays the content with white background color. Please see the attached snapshot for details. How can we change the WebTab control background color without modifying the ig_webtab.css file that comes with Infragistics controls. I want to set the WebTab background color to transparent (or some other color) thru code dynamically as we have a requirement to display the tabs in different colors on different pages. I tried with some options to set the background color, but they did not work. Could you please let me know how to set the overall WebTab (or each Tab) control background color thru code (at run time).
Also I have observed that nothing happens when clicked on the individual tab headers. I understand that, when user clicks on any tab header, the corresponding tab content will be displayed. But this does not happen in my implementation. Is it not the default behavior of WebTab control? If not, please let me know how to display the corresponding tab content when the user clicks on its header.
If possible, please provide a sample application for the above two functionalities so that I could go thru and implement in our application. Thanking you in advance.
With Regards,Naga
Hello Naga,
Thank you for posting in our forums!
The recommended approach to set the background colors is to set the CssClass property of the tabs. Another way is to set the Style collection in code behind. The following code shows examples of this.
PageTab.Tabs[0].CssClass = "green-background";PageTab.Tabs[1].CssClass = "blue-background"; PageTab.Tabs[2].Style.Add("background-color", "magenta");
PageTab.Tabs[2].Style.Add("background-color", "magenta");
You could also add your own CSS definitions instead of modifying the ig_webtab.css file. You can make the WebTab transparent using the following:
.igtab_THContentHolder, .igtab_THContent{ background-color: transparent;}
As for the issue with content not showing when changing tabs, the tabs should be showing their content when switched to. I am not familiar with the ContentPanel control you are using, but when I include a normal asp:Panel, the content shows as expected. I have attached a sample demonstrating this and the methods of changing the background colors.
If you need further assistance with this, please let me know.
Hi Michael,
Thank you for the reply. "ContentPanel" is a wrapper created based on ASP.NET's Panel control. Thanks for providing the sample application. It works fine as expected and answers to my questions. As per your reply, I understand that the recommended option to set the tab background color is thru the CSS property. You have specified the styles in ASPX page to demonstrate this option. I have observed that you are setting the background color thru code behind in the application and it works fine. However, I have commented the styles (especially .green-background, .blue-background, .igtab_THContentHolder, .igtab_THContent) in ASPX page and tried to set the tabs background color thru code, but it is not working. I think, the CSS styles takes the precedence and dominates the setting done thru the code. And thats why the sample application works fine without any issues. When I commented the styles and tried to set the background color thru code behind only, then the tab color does not change (to transparent) and it shows with white background color by default. Please see the attached snapshots and the changes made below. Could you please look into the application and get the below changes working (without enabling the CSS styles). My requirement is to change the tabs background colors thru code without modifing the CSS styles (ig_webtab.css file). Thanks in advance. Please let me know if you need any more details for this request.
Default.aspx:- (commented some of the styles)<style type="text/css"> body { background-color: red; }
.my-content { font-size: large; }
/*.green-background { background-color: green; }
.blue-background { background-color: blue; } */
/* You can use these to make the WebTab transparent. Uncomment to see it in effect. */ /*.igtab_THContentHolder, .igtab_THContent { background-color: transparent; }*/</style>
Default.aspx.cs:- (modified Page_Load code)protected void Page_Load(object sender, EventArgs e){ //PageTab.Tabs[0].CssClass = "green-background"; //PageTab.Tabs[1].CssClass = "blue-background";
//PageTab.Tabs[2].Style.Add("background-color", "magenta");
foreach (ContentTabItem tab in PageTab.Tabs) { if (tab.Text.Equals("@PROVIDER@")) tab.Style.Add("background-color", "transparent"); else tab.Style.Add("background-color", "magenta"); }}
Hi Naga,
The TabContentPane (.igtab_THContentHolder CSS class) is the reason you are still seeing white. ".igtab_THContentHolder" defines background-color: white in our ig_webtab.css file. Our TabContentPane object does not derive from a WebControl like the ContentTabItem does, so there is no Style collection available on it.
To achieve this, you will need to create a new CSS class (or utilize an existing one) that makes the background-color transparent.
If you have a CSS class that can be used, you can set it as the PageTab.ContentPane.HolderCssClass property.
I decided to look through the ig_webtab.css file and noticed we have a ".igtab_LHCenterDis" class which defines just a transparent background. It seems a little hacky to me, but you could set this class to the HolderCssClass.
// This CSS class in ig_webtab.css defines a transparent background-color that can be used.PageTab.ContentPane.HolderCssClass = "igtab_LHCenterDis"; foreach (ContentTabItem tab in PageTab.Tabs){ if (tab.Text.Equals("@PROVIDER@")) tab.Style.Add("background-color", "transparent"); else tab.Style.Add("background-color", "magenta");}
foreach (ContentTabItem tab in PageTab.Tabs){ if (tab.Text.Equals("@PROVIDER@")) tab.Style.Add("background-color", "transparent"); else tab.Style.Add("background-color", "magenta");}
If you have any further questions or concerns with this, please let me know and I will be glad to help.
Thank you once again for the reply. As per your suggestion, I have modified the code behind file as below and observed that the tabs are still displayed with white background color. I think, it is because of ".igtab_THContentHolder" style defined in ig_webtab.css file as it takes priority and ignores the setting done thru code. Am I missing anything here? I do have the ig_webtab.css file in the project and it does have "igtab_LHCenterDis" style defined. But still the tabs are displayed with white background color. As a trial, I have commented the background color setting in .igtab_THContentHolder, .igtab_THContent styles in ig_webtab.css file and when ran the application (with code changes below), then I could see all the tabs with transparent background. I do not want to modify the ig_webtab.css file as it has the default styles and still would like to set the tabs background to different colors dynamically (thru code). There are lots of pages in the application where we implement the WebTab control and some of the pages will have tabs displayed in different colors based on the requirement. Please let me know how to achieve this requirement dynamically (thru code).
Default.aspx.cs:- (modified Page_Load code)
protected void Page_Load(object sender, EventArgs e)
{
//PageTab.Tabs[0].CssClass = "green-background";
//PageTab.Tabs[1].CssClass = "blue-background";
//foreach (ContentTabItem tab in PageTab.Tabs)
//{
// if (tab.Text.Equals("@PROVIDER@"))
// tab.Style.Add("background-color", "transparent");
// else
// tab.Style.Add("background-color", "magenta");
//}
PageTab.ContentPane.HolderCssClass = "igtab_LHCenterDis";
}
Sorry for my earlier post. I went thru the details given in your reply and realized my mistake. I have modified the code behind file as below and now could see the tabs with transparent color as expected. Please see the attached snapshot. I have not modified the ig_webtab.css file and left as it is received from Infragistics. I think, the issue is resolved and I have got the code changes required for implementation in our application. I appreciate your support and thank you very much for the help. I will let you know if I come across any other issues with WebTab control implementation.
foreach (ContentTabItem tab in PageTab.Tabs)
if (tab.Text.Equals("@PROVIDER@"))
tab.Style.Add("background-color", "transparent");
else
tab.Style.Add("background-color", "magenta");