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,

To get reference to tab on client, you may use
get_tabs()[index]
or
getTabAt(index)
methods of webtab-object. All public methods are documented. It is also possible to insert "debugger;" and get all member methods and variables at run time. In this case you should be aware that all members which start with _ are considered to be internal and their usage is not supported.

I am not sure why you need to change size of ContentUrl. WebTab should handle that automatically.
If there are undesired scrollbars, then they can be removed by Tab.ScrollBars=Hidden. There are several features related to sizing of content, like ContentPane.AutoSize/Min/Max/Width/Height. Each tab also has AutoSize. Some of those features have effect only in combination of missing or existing values of Width/Height. In case of ContentUrl, only local pages are supported for autosizing.
Below is example which you asked for:

<script type="text/javascript" id="igClientScript1">
function WebTab1_Initialize(sender, eventArgs)
{
 var tabs = sender.get_tabs();
 var selIndex = sender.get_selectedIndex();
 var selTab = tabs[selIndex];
 // or
 //var setTab = sender.getTabAt(selIndex);
 //var div = selTab.getBody();
 //debugger;
 var iframe = selTab.get_iframe();
 if (iframe)
 {
  iframe.style.height = '450px';
 }
}
</script>
<ig:WebTab ID="WebTab1" runat="server" Height="500px" Width="600px">
  <Tabs>
    <ig:ContentTabItem runat="server" Text="Tab 1" ContentUrl="Temp1.aspx"></ig:ContentTabItem>
    <ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem>
  </Tabs>
  <ClientEvents Initialize="WebTab1_Initialize" />
</ig:WebTab>

could you please post a link to the client side object models for the WebTab , I can find ie for the UltraWebTab but am having difficulty finding it for just WebTab. Thank you, sir.

Hello. Thanks for getting back to me. I tried your code but I got an error with iFrame and that's because the the element in the content Pane is a Div. So I used the following code, but the contentpane still won't resize to 450px:

function WebTab1_Initialize(oTab, oEvent) {
 
	    debugger;
	    var tabs = oTab.get_tabs();
	    var selTab = tabs[oTab.get_selectedIndex()];
	    //var iframe = selTab.get_iFrame();
	    var element = selTab.get_element();
 
	    if (oTab.get_selectedIndex() == 1 && element) {
	        element.style.height = '450';          
		    //selTab.Template.style.Height = '450px';
		}		
	}

But it doesn't work and after setting it to 450px, when I look at the value it just says "100%"

The reason why I need to resize the contentpane is that on the page we have two tabs

(BTW I inherited this code), 1 is visible and has a contentpane default height of  150px. 

The 2nd is invisible and based off of a selection, we populate it's contentpane with a 

usercontrol:

<ContentTabItem AccessKey="M" Key="main"  EnableCloseButton="false" ScrollBars="Hidden">                            
<Template>
	<uc:ucPaygrid id="UcPaygrid1" runat="server"></uc:ucPaygrid> 
</Template>
</ContentTabItem>                                                                     
	<ContentTabItem AccessKey="a" Key="maint" Text="Maintenance" Hidden="true"
                                     MarginLeading="5px" EnableCloseButton="True"  ScrollBars="Hidden">
	<Template></Template>                                                        
</ContentTabItem>


and so on Initialize, I want to set the height of the second tabs contentpane to 450px

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.