Setting WebTab to Height 100% | Infragistics Forums

200

Setting WebTab to Height 100%

Andreas posted over 13 years ago

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 regards
Andreas

24497

Suggested Answer
[Infragistics] Viktor Snezhko posted over 13 years ago in reply to r

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>
Cancel
Reply

Reject Answer

Cancel

120

r posted over 13 years ago in reply to [Infragistics] Viktor Snezhko

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

120

r posted over 13 years ago in reply to Andreas

Hello

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

200

Andreas posted over 13 years ago in reply to [Infragistics] Viktor Snezhko

Hello,

Thank you very much. This code does the job!
Cancel
Reply

Cancel
24497

[Infragistics] Viktor Snezhko posted over 13 years ago

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>
Cancel
Reply

Cancel