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,

Unfortunately changing attributes of DOM elements used by WebTab are not supported. If application has side effects because of that, then it should not use that.
If size of WebTab is permanent (fixed px width and height), then application may modify child elements like IFRAME and other children of content pane, but not get_element() or elements used for tab-label.

WebTab dynamically synchronizes and adjusts layout of its labels and content panes on various actions. If application will change layout attributes as well, then behavior can be unpredictable.

If you need to modify size/bounds of WebTab, then I can suggest to use its public methods:

setSize(width, height)
or
set_width(width), set_height(height).

Parameters should be valid % or px html units.

Hi

So I think I understand now. As my code works today, I simply add a usercontrol to a Template and it's visible. Inorder to resize the iframe, I must add the usercontrol first to an aspx page and then set that as my content url. Before I do this, is there a way to resize the template? Thanks.

Hello Again

I have another question, how can I place a user control into the contentpane? ContentPane is not a member of ContentTabItem.

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

Hi Harishy,

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

Hi Harishy,

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.

Hi Viktor,

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

thank you

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.