thread215-1572221
I have a page getting loaded in one of the frames of a frameset(which gets opened in maximized window).
The page has a third party navigator control inside an updatepanel(which gets rendered as a <div>) which is enclosed in a set of divs. The div's height and width are set dynamically through javascript. The navigator control presents as a tree with nodes to collapse and expand.(again, these are getting rendered as divs with overflow:auto) If content grows greater than the container div's height, scrollbar should appear. It works in IE 7 but in IE 8 the scrollbar does not appear and the rest of the content is chopped off.
This is my code now:
and this is what is relevant from the css:
.navigator-center
{
margin: 0px 1px 0px 5px;
height:100%;
clear:both;
overflow:scroll;
}
Any help is much appreciated.
I have a page getting loaded in one of the frames of a frameset(which gets opened in maximized window).
The page has a third party navigator control inside an updatepanel(which gets rendered as a <div>) which is enclosed in a set of divs. The div's height and width are set dynamically through javascript. The navigator control presents as a tree with nodes to collapse and expand.(again, these are getting rendered as divs with overflow:auto) If content grows greater than the container div's height, scrollbar should appear. It works in IE 7 but in IE 8 the scrollbar does not appear and the rest of the content is chopped off.
This is my code now:
Code:
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head id="Head1" runat="server">
<title>Navigator</title>
<script type="text/javascript">
function setDiv() {
var wh = getWindowHeight(); // Window Height
var d = document.getElementById('navigatorContainer'); // Get div element
d.style.height = wh + 'px'; // Set div height to window height
alert(d.style.height);
}
function getWindowHeight() {
var windowHeight = 0;
if (typeof (window.innerHeight) == 'number')
windowHeight = window.innerHeight;
else {
if (document.documentElement && document.documentElement.clientHeight)
windowHeight = document.documentElement.clientHeight;
else {
if (document.body && document.body.clientHeight)
windowHeight = document.body.clientHeight;
};
};
return windowHeight;
};
</script>
</head>
<body class="navigator" onload="javascript:setDiv()">
<form id="form1" method="post" runat="server">
<div id="navigatorHeader">
<usc:Header id="headerControl" runat="server" Caption="Navigator" ImageUrl="~/consoles/Estimator/images/Navigator.gif" TrackCrumbs="false" ShowClose="true" CloseUrl="javascript:$Navigator.close();" />
</div>
<div id="navigatorContainer" >
<usc:UpdatePanel id="navigatorContent" runat="server" UpdateMode="Conditional" Style-CssClass="navigator-center" >
<Triggers>
</Triggers>
<ContentTemplate>
<ignav:UltraWebTree id="navigatorTree" runat="server" Editable="true" LoadOnDemand="ManualSmartCallbacks" SkinID="NavigatorTree">
<Levels>
<ignav:Level Index="0"/>
<ignav:Level Index="1"/>
</Levels>
</ignav:UltraWebTree>
<igx:UltraWebTreeLayoutManager id="uwtlm" runat="server" TargetControlID="navigatorTree" ContainerControlID="navigatorContent" />
<asp:HiddenField id="selectNodeUrl" runat="server" />
<asp:Timer id="delayLoadTimer" runat="server" Interval="1" Enabled="false" />
<asp:HiddenField ID="notices" runat="server" />
</ContentTemplate>
</usc:UpdatePanel>
</div>
<%// Hidden Command Buttons %>
<div style="display:none;">
<asp:Button id="refreshButtonNavigator" runat="server"/>
<asp:Button id="selectNodeFromUrlButton" runat="server"/>
</div>
</form>
</body>
</html>.navigator-center
{
margin: 0px 1px 0px 5px;
height:100%;
clear:both;
overflow:scroll;
}
Any help is much appreciated.
