Hello,I just started to work with NetAdvantage tools for asp.net. And I'm not very exerpienced in asp.net development yet.My first problem I have now is setting the height of a webTab control to 100%. The webTab control is placed in an usercontrol, that in turn is placed in a webSplitter in the aspx page.With:<ig:WebTab ID="tabWorkspace" runat="server" Height="100%" Width="100%"> <Tabs> <ig:ContentTabItem runat="server" Text="Start" ContentUrl="Start/start.htm" ScrollBars="Hidden" Height="100%"> </ig:ContentTabItem> </Tabs></ig:WebTab>I got exact what I want. The webTab uses the complete vertical space of the page.But after I have added an UpdatePanel:<asp:UpdatePanel ID="UpdatePanel1" runat="server" Height="100%"><ContentTemplate><ig:WebTab ID="tabWorkspace" runat="server" Height="100%" Width="100%"> <Tabs> <ig:ContentTabItem runat="server" Text="Start" ContentUrl="Start/start.htm" ScrollBars="Hidden" Height="100%"> </ig:ContentTabItem> </Tabs></ig:WebTab></ContentTemplate></asp:UpdatePanel>the 100% height got lost. The webTab is set to a fixed height, from which I don't know where it comes from. The content is larger than the webTab space and a vertical scrollbar appears.All attempts to set the height back to 100% failed. I have tried to set the UpdatePanel height to 100% and also tried to set the height to 100% in code behind. Pagel Load and Page Prerender events for usercontrol and main page.Can anybody give me a hint what can be wrong?best regardsAndreas
Hi Andreas,
If content of splitter is located in a wrapper like DIV and application needs to stretch that wrapper to the size of splitterPane, then that wrapper should have (90...100)% width/height or it should use calculated px values and adjust them on resize and initialization events of WebSplitter.
The architecture of UpdatePanel is based on DIV, but for some unknown reason it does not expose on server any properties/options related to that DIV: no Width/Height/Style/Border/BackColor/etc.
I am not sure how you managed to set width/height of UpdatePanel. I tried to set width/height to 100% on client and it seemed to work and tab was stretched to the size of splitterPane. Below are my codes.
Note: instead of WebSplitter.Initialize, you may use any load/initialize event on client.
<script type="text/javascript">function WebSplitter1_Initialize(sender, eventArgs){ var up1 = $get('<%=UpdatePanel1.ClientID%>'); if (up1) up1.style.width = up1.style.height = '100%';}</script>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="600px" Width="700px" Orientation="Horizontal"> <Panes> <ig:SplitterPane runat="server"> <Template> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ig:WebTab ID="WebTab1" runat="server" Width="100%" Height="100%"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" ContentUrl="Temp2.aspx"> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:WebTab> </ContentTemplate> </asp:UpdatePanel> </Template> </ig:SplitterPane> <ig:SplitterPane runat="server"> </ig:SplitterPane> </Panes> <ClientEvents Initialize="WebSplitter1_Initialize" /></ig:WebSplitter>
Hello
I just converted all UltraWebTabs to WebTabs and am having difficulty with resizing the template that contains the content. In the WebTab ClientEvents I use the SelectedIndexChanged="WebTab1_Initialize".
function UltraWebTab1_InitializeTabs(oWebTab){ if (oWebTab.getSelectedIndex() == 1){ oWebTab.getSelectedTab().elemIframe.style.height= '450px'; }
I need to mimic this behaviour but I am stuck here:
function WebTab1_Initialize(oTab, oEvent) { var tabIndex = oEvent.get_tabIndex(); if (oEvent.get_tabIndex() == 1) { oTab.ContentPane.style.height= '450px'; }
any help would be appreciated thanks
Hi,
The WebTab.ContentPane is holder of content panes of all tabs. It can not contain templates. I assume that you use ContentTabItem.UserControlUrl. That property was designed to set template which you ask for. If you asked about adding template/child controls at run-time, then you can use ContentTabItem by exactly same way as any container. Example:
this.WebTab1.Tabs[0].Controls.Add(new LiteralControl("My dynamic control"));
If you need to resize your control/template on client or on server regardless of size of WebTab and its resizing functionality, then the best I can suggest, is to wrap your control into a DIV or any other container, set the id attribute for that container, find on client reference to that container and modify its attributes.
Below is example for you:
aspx:
<script type="text/javascript">function WebTab1_Initialize(sender, eventArgs){ var tab1 = sender.getTabAt(0); var content1 = tab1.findChild('ContainerOfTab1'); if (content1) { content1.style.width = '100px'; content1.style.height = '100px'; content1.style.border = '2px solid red'; }}</script><ig:WebTab ID="WebTab1" runat="server" Width="300px" Height="200px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem> </Tabs> <ClientEvents Initialize="WebTab1_Initialize" /></ig:WebTab>
aspx.cs:
protected void Page_Load(object sender, EventArgs e){ Panel panel = new Panel(); panel.ID = "ContainerOfTab1"; this.WebTab1.Tabs[0].Controls.Add(panel); this.Page.LoadTemplate("WebUserControl1.ascx").InstantiateIn(panel);}
Thanks for all your help. I have 2 more questions and then I'll be out of your hair:
1. How can you set the webtab header's height?
2. After I dynamically add a contentabitem to a webtab, all I see is the new tab along with the older one but nothing shows in the contenpane until I click on an actual tab. I have tried setting the focus property of the contenttabitem and playing with the hidden property but it didn't work. Thanks
1.Appearance of WebTab and its parts is defined by css classes (UltraWebTab had server-Style properties for that).
It means that if application needs to modify appearance should modify attributes of css classes. WebTab exposes absolutely all css classes used for its rendering through XxxCssClasses properties. Application also may modify those attributes in ig_webtab.css used by application and it will affect all WebTabs on page. You also may use a DOM inspector of any browser and check actual layout of tab labels/containers and which classes/attributes are used.
Below is example to (slightly) modify height of tabs.Note: since background images are used and they have limited sizes, if application needs large heights, then it should create its own background images for corresponding classes.
<head runat="server"><title></title><style>.tabCss { height: 27px; }.tabTailCss { height: 27px; }.tabHolderCss { height: 28px; }</style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" /><ig:WebTab ID="WebTab1" runat="server" Width="300px" Height="200px"><Tabs><ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem><ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem></Tabs><CssClasses HeaderHolderCssClass="tabHolderCss" /><TabItemCssClasses CssClass="tabCss" TailCssClass="tabTailCss" /></ig:WebTab></form></body>
2. I do not know why that may happen. Please test a sample which I provided earlier and check if it has same problem.Note: dynamic content should be recreated in every single session. If your application loads content/tab conditionally, then application is responsible for any side effects. That is beyond support by WebTab.
HeaderHolderCssClass this property does not exist for Web Tab...I have the same requirement...I want to increase the Height of the tab
Hi Harishy,
That property is located within WebTab.CssClasses. If you need to change appearance/size of tab-labels, then you should keep in mind that architecture is based on background images applied to css classes and layout is quite complex. Absolutely all aspects of rendering are exposed as public options which can override defaults. You might look at WebTab.TabItemCssClasses and ContentPane. Each tab-item also has overrides with highest priority: WebTab.Tabs[index].TabCssClasses.Before doing anything, I suggest to inspect (brower developer tools) structure of html elements related to tab-items and their containers. Changing height of tab-labels may require much more than a change of height of tab-holder. If you willing to experiment, that the easiest way, is to open file (~/ig_res/Default/ig_webtab.css) currently used by your application, change attributes attributes in some classes and check their effect. When you find desired appearance, then you may create corresponding overrides for css properties of WebTab and move those modified attributes in those custom css classes.
I guess, you should send me a simple example and explain more what means "position of tab changing...". You may attach aspx file within "Options" tab.
Did you mean that browser automatically scrolls content of page vertically? That could be quite strange. In most cases if browser does similar autoscrolls in order to displayed focused element, then that element goes to the top of page, but not to the bottom. The WebTab puts its invisible focus-INPUT at the left side of tab-labels area. Autoscroll might be triggered if that element is located at wrong place: outside of WebTab at the very top of browser. You may try to debug, find that element and verify its location using developer tools of browser. It has id something like "WebTab1.i" and its parent is SPAN with class="igtab_THHolder". To see a hightlighted rectable around that element, you may increase width/height of that element from its default 0px to 10px or larger.
If INPUT is visually located within bounds of tab-labels, then click on tab-label should not trigger autoscroll of browser. If that scroll still happens, then there is some other reason for that: maybe unrelated javascipt in application of smth else.I tried following html and it worked without problems.<div style="border:2px solid red;height:900px;width:300px;"></div><ig:WebTab ID="WebTab1" runat="server" Width="370px" Height="300px" EnableActivation="True"> <Tabs> ... </Tabs></ig:WebTab><div style="border:2px solid red;height:900px;width:300px;"></div>
Hi Viktor,
I meant, Say my tab is at the center of my screen once I click on any tab header the position of tab is changing to the bottom of my screen...Please suggets
thank you
Of course, you may keep background images only for specific states (like disabled). I looked at css classes and found that our Visual Design Team built some state images from single combined image file (to reduce number of loading resources). Therefore some images come from main state. If main state image (like igtab_THCenter) was removed, then to reuse same default images for disabled state, application should redifine image within igtab_THCenterDis. Same for all other classes.
Note: changes in default ig_webtab.css will affect all WebTabs in application. Application better should move modified attributes into local to page classes (within STYLE or similar) with any names and use those names for properties of WebTab. So, only a single WebTab will be customized/affected.
It is not clear to me what means "my focus resets". If it is about losing focus by an INPUT located inside or outside of tab, then that is what activation about. In order for activation to work, it should own focus. Focus can be obtained by continues tab-key or by mouse-click. Tab-labels can be treated as another INPUT on page and actually WebTab uses invisible INPUT for that purpose. Once tab got focus, it can process arrows, space and enter keys. If application needs to prevent getting focus by WebTab, then it should not enable activation.
I was able to reduce the Image size and was able to successfully put image in the tab. Looks Very good....
One question in this scenario is can i still assign the background Image for disabled tabs.
I used the following code to get to the design i wanted.
.TabHeaderHolderCss { background-image:none; background:none; } .igtab_THTabSel { background-image:none; background:none; }
.igtab_THTab { background-image:none; background:none; padding-left:0px; border:none; }
.igtab_THTailSel { background-image:none; background:none; } .igtab_THTail { background-image:none; background:none; padding-right:0px; } .igtab_THCenter { background-image:none; background:none; padding-left:0px; } .igtab_THCenterSel { background-image:none; background:none; }.igtab_THContent{ border:none; position:absolute;}
.igtab_THContentHolder{ background:none; border:none;}
One More question is when I click on the tabs my focus resets..How can I resolve this. I already set the activation property to True....
Please suggets