Infragistics Home

Infragistics Forums

Infragistics community online discussions.
Welcome to Infragistics Forums Sign in | FAQ
in Search
Infragistics Forums » NetAdvantage for ASP.NET » Layout » WebTab » HOW TO: Make UltraWebTab Height = the size of the page.

HOW TO: Make UltraWebTab Height = the size of the page.

Last post 09-08-2008 10:30 by [Infragistics] Viktor Snezhko. 1 replies.
Page 1 of 1 (2 items)
Sort Posts: Previous Next

  • 09-02-2008 21:06

    HOW TO: Make UltraWebTab Height = the size of the page.

    Reply Contact

    Is there a way to make the UltraWebTab height equal to the Height of the page/the area allowed by the browser.   If one enter's 100% for Width, the Tab then takes up 100% of the pages Width.   If one enter's 100% for Height, this fails to something maybe 50 characters high.   I read on the forum that using this JavaScript could help ...

    function setScreenSize()
    {
        iHeight = window.frames(0).document.body.offsetHeight;
        var pageDiv = document.getElementById('divTag');
        //increase overall height so there is NO inner scroll bar. Ie; inner and browser scroll bar. So if you
        //    increase then you have the browser scroll bar which is want we want
        pageDiv.style.height = iHeight + 40;
    }

    ...but it didn't.   Could someone please state in code how to make the Tab shrink and grow in height with the size of the page using MasterPages.   My idea follows but it doesn't work.   Please advise how to fix it.

    <asp:Content ID="Content2" runat="server" contentplaceholderid="head">
       <script type="text/jscript">

       function     setScreenSize()
       {
           iHeight = window.frames(0).document.body.offsetHeight;
           var pageDiv = document.getElementById('divTag');
           //increase overall height so there is NO inner scroll bar. Ie; inner and browser scroll bar. So if you increase then
           //you have the browser scroll bar    which is want we want
           pageDiv.style.height = iHeight + 40;
       }
       </script>
    </    asp:Content>
    <    asp:Content ID="Content1" ContentPlaceHolderID="DataArea" runat="server">
        <    div id="divTag">
            <    table id="mainTab" style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
                <tr valign="top" style="height:100%">
                    <td>
                        <igtab:UltraWebTab ID="tabMain" runat="server" Width="100%" Height="100%">
                        </igtab:UltraWebTab>
                    </td>
                </tr>
            </    table>
        </    div>
    </    asp:Content>
    • Post Points: 20

  • 09-08-2008 10:30 In reply to

    Re: HOW TO: Make UltraWebTab Height = the size of the page.

    Reply Contact

    Hi,

    To render itself the UltraWebTab uses <table>, where top row represents tab labels and bottom row represents content pane. The height of bottom <td> is set to 100%. Under xhtml it means that overall height of tab will be equal to intended height plus height of top static row used for tab labels. To handle exact height, the calculations on client are required, which are not used by UltraWebTab for several reasons (compatibility with older behavior, possible jumping on initialization and other side effects).

    If application needs exact 100% height of tab on client, then it may use logic similar to codes below.
    Note: to support % height, application needs to set heights of <html>, <body> and <form> as well, and it should process onresize event in addition to onload.

    <html xmlns="http://www.w3.org/1999/xhtml" style="height:90%">
    <    head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    // flag to add listener for resize events
    var _onloadFlag = true;
    function adjustHeight()
    {
          var tab = igtab_getTabById('UltraWebTab1');
          // <td> which is used as content pane
          var cp = document.getElementById(tab.ID + '_cp');
          // <table> of tab
          var table = tab.element;
          // <div> container of tab
          var container = table.parentNode;
          // height available for tab
          var height = container.clientHeight;
          if(!height) return;
          // difference between heights of tab and content pane
          var heightShift = tab._myHeightShift;
          // 4 - is adjustment for top/bottom borders of tab
          if(!heightShift)
        heightShift = tab._myHeightShift = (table.offsetHeight - cp.offsetHeight + 4);
          // calculate height for content pane (can be improved for different browsers)
          height -= heightShift;
          if(height < 0) return;
          // set height of content pane to make height of tab to fit with container
          cp.style.height = height + 'px';
          if(!_onloadFlag)
             return;
      _onloadFlag =     false;
          // process onresize events
          ig_shared.addEventListener(window, 'resize', adjustHeight);
    }
    </script>
    </    head>

    <body style="height:90%" onload='adjustHeight()'>
    <form id="form1" runat="server" style="height:100%">
         <div id="divTag" style="border:1px solid red;height:100%;width:100%;">
          <igtab:UltraWebTab ID="UltraWebTab1" runat="server" Height="100%" Width="100%">
           <Tabs>
            <igtab:Tab Text="New Tab"></igtab:Tab>
            <igtab:Tab Text="New Tab"></igtab:Tab>
           </Tabs>
          </igtab:UltraWebTab>
         </div>
    </form>
    </    body>
    </    html>

    Regards,
    Viktor
    Infragistics web team
    • Post Points: 5
Page 1 of 1 (2 items)
Copyright © Infragistics, Inc. 2004-2008
Powered by Community Server (Commercial Edition), by Telligent Systems