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

150

Burton G. Wilkins posted over 16 years ago

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

24497

[Infragistics] Viktor Snezhko posted over 16 years ago

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

Verify Answer

Cancel
1100

Mike posted over 15 years ago in reply to [Infragistics] Viktor Snezhko

Hi Viktor,

I really appreciate your help on this.

My tabs use TargetUrl pages. these pages get controls added to tem dynamically (server side)

for example, on my 'reports' tab, i add a number of UltraWebCharts upon request... making the panel within the tab page grow in height.

I am ending up with 2 scroll bars (one in the tab, one in the browser if the user has a smaller window than my original size of 810px)

I tried your example above on its own - works great!

trying to get it in my existing master page - I'm struggling.

If I can get my tab to alw***ze to the window, I ca avoid the browsers scroll bars.

I'm new to javascript - so I'm at a loss.
Cancel
Reply

Verify Answer

Cancel

Reply

1100

Mike posted over 15 years ago in reply to Mike

Is there a way on the server side to resize the tab control - once I've built my internal page (which as I mentioned dynamically grows with content)?

at the end of Page_Load, can I get my page height, then programatically set the tab controls height?

I'm always increasing height via server-side processing...

If this is possible, I could manage the tab size in every "TargetUrl" pages' Page_Load...

Thanks!
Cancel
Reply

Verify Answer

Cancel

Children

24497

[Infragistics] Viktor Snezhko posted over 15 years ago in reply to Mike

Hi,

If you use master page or similar naming container, then to get reference to javascript object which represents UltraWebTab, you may use its ClientID. Below is one of solutions:
var tab = igtab_getTabById('<%=UltraWebTab1.ClientID%>');

Codes which I sent last time- are just template, but not final implementation. More work is required for a specific application. Maintenance requires knowledge of javascript.

The only thing that UltraWebTab knows about TargetUrl is its string representation, which is used to render src of iframe. That is all. If application needs some interactions between TargetUrl and UltraWebTab, then it should find it own way to accomplish that.

You may try to use static container like Session to exchange data. For example, within codes of TargetUrl (maybe OnLoad event), you may do something like

Session["TargetUrlOnTab1_Width"] = Unit.Pixel(300);
Session["TargetUrlOnTab1_Height"] = Unit.Pixel(400);

Within codes of page where UltraWebTab is located (maybe within OnPreRender event), you may get those values

if(this.UltraWebTab.SelectedTabIndex != 0)
return; //another TargetUrl is selected
object width = Session["TargetUrlOnTab1_Width"] ;
if(width is Unit)
this.UltraWebTab.Width = (Unit)width;
object height = Session["TargetUrlOnTab1_Height"] ;
if(height is Unit)
this.UltraWebTab.Height = (Unit)height;
Cancel
Reply

Verify Answer

Cancel