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

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

I was just debugging and I stand corrected, the javascript works for a split second but then is repainted to the smaller size again. Also, my tabs appear in the middlein IE8 and IE9 even when I set TabLocation to TopRight. 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.

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.