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
William
90
Resized UltraWebTab at runtime= size web form
posted

How I can Resized an UltraWebTab at runtime?

I means when the user resized the web form(min,max) the Ultrawebtab resized dynamically.

 

Thanks

  • 24497
    posted

    Hi Rajwi,

    If you use % for Width and Height of UltraWebTab, then there is no need to do any adjustments and control should adjust itself automatically. However, under XHTML the heights of all containers of UltraWebTab should be defined. Example below uses height:100% for <html>, <body> and <form>. If your application has other containers like <div>, <table>, etc, then their heights also should be set.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
    <head runat="server">
        <title></title>
    </head>
    <body style="height:100%">
        <form id="form1" runat="server" style="height:100%">
            <igtab:UltraWebTab ID="UltraWebTab1" runat="server" Width="50%" Height="50%">
         <Tabs>
          <igtab:Tab Text="New Tab"></igtab:Tab>
          <igtab:Tab Text="New Tab"></igtab:Tab>
         </Tabs>
        </igtab:UltraWebTab>
        </form>
    </body>
    </html>
     

    If you use px for Width and Height of UltraWebTab and you need to change size on client, then you should find html elements which represent outer html element (TABLE) and content pane (TD) and set their width/height. The id of main element is based on ClientID with prefix "igtab" and id of content pain has suffix "_cp".  Below is example:

    <script type="text/javascript">
    function resize()
    {
     var tab = document.getElementById('igtab<%=UltraWebTab1.ClientID%>');
     var cp = document.getElementById('<%=UltraWebTab1.ClientID%>_cp');
     if(!tab || !cp)
      return;
     var width = 400, height = 400;
     tab.style.width = width + 'px';
     tab.style.height = height + 'px';
     var headerHeight = 30, border = 4;
     cp.style.width = (width - border) + 'px';
     cp.style.height = (height - headerHeight - border) + 'px';
    }
    </script>
    <input type="button" onclick="resize()" value="resize" />