Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Burton G. Wilkins
150
HOW TO: Make UltraWebTab Height = the size of the page.
posted

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>

Parents
No Data
Reply
  • 24497
    posted

    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>

Children