Hi,
I'm evaluating your UI component to replace a frame-based structure.
So far I've achived what I want and it looks good i Firefox 3.0.1 (OS: Vista).
But in IE7 the layout flips out totally.
The RadDocks in the Content RadPane is overlaying the RadPane (z-index problem?) and the scrollbars in the RadPane doesn't scroll its content.
As I mentioned earlier; it looks good in Firefox...
Could you please point me in the right direction to solve this?
Code:
Regards
I'm evaluating your UI component to replace a frame-based structure.
So far I've achived what I want and it looks good i Firefox 3.0.1 (OS: Vista).
But in IE7 the layout flips out totally.
The RadDocks in the Content RadPane is overlaying the RadPane (z-index problem?) and the scrollbars in the RadPane doesn't scroll its content.
As I mentioned earlier; it looks good in Firefox...
Could you please point me in the right direction to solve this?
Code:
%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!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"> |
<head id="Head1" runat="server"> |
<title>Portal with flow layout</title> |
<style type="text/css"> |
html, body, form |
{ |
width: 100%; |
height: 100%; |
margin: 0px; |
padding: 0px; |
overflow: hidden; |
} |
td |
{ |
vertical-align: top; |
} |
.raddock |
{ |
text-align: left; |
font: 11px/14px arial,verdana,sans-serif; |
} |
.raddockzone |
{ |
border: 0px !important; |
padding: 0px !important; |
overflow: hidden !important; |
} |
.raddock .rdTitlebar |
{ |
height: auto; |
background-image: none !important; |
font-size: 1.1em; |
line-height: 2em; |
} |
.raddock .rdTitle |
{ |
background: none transparent !important; |
} |
.raddock div |
{ |
border-color: silver !important; |
} |
.raddock .rdCommands |
{ |
padding-right: 5px; |
} |
.raddock .innerWrp |
{ |
margin: 0; |
padding: 10px; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager ID="ScriptManager" runat="server" /> |
<div id="ParentDivElement" style="height: 100%;"> |
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" Skin="Outlook"> |
<telerik:RadPane ID="TopPane" runat="server" Height="100" Scrolling="none"> |
<!-- Place the content of the pane here --> |
Logo |
</telerik:RadPane> |
<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" EnableResize="false" CollapseMode="Backward" /> |
<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"> |
<telerik:RadSplitter ID="NestedSplitter" runat="server" Skin=""> |
<telerik:RadPane ID="LeftPane" runat="server" Width="150" Scrolling="Y"> |
<table width="100%"> |
<tr> |
<td align="center"> |
<table align="center" border="0"> |
<tr> |
<td align="center"> |
Menu |
</td> |
</tr> |
</table> |
</td> |
</tr> |
</table> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" EnableResize="false" /> |
<telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both"> |
<telerik:RadDockLayout runat="server" ID="RadDockLayout1"> |
<div style="border: 0px solid #f4f4f4; padding: 10px;"> |
<table cellspacing="0" cellpadding="0" width="100%"> |
<tr> |
<td style="width: 33%;"> |
<telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="vertical" Style="border: 0px;" FitDocks="true"> |
<telerik:RadDock runat="server" ID="UserInfo" Title="RadDock 1.1"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
... |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
<telerik:RadDock runat="server" ID="Pictures" Title="RadDock 1.2"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
<telerik:RadDock runat="server" ID="Currency" Title="RadDock 1.3"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
<telerik:RadDock runat="server" ID="RadDock1" Title="RadDock 1.4"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
</telerik:RadDockZone> |
</td> |
<td style="width: 33%;"> |
<telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="vertical" Style="border: 0px;" FitDocks="true"> |
<telerik:RadDock runat="server" ID="Horoscopes" Title="RadDock 2.1"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
<telerik:RadDock runat="server" ID="News" Title="RadDock 2.2"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
... |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
</telerik:RadDockZone> |
</td> |
<td style="width: 33%;"> |
<telerik:RadDockZone runat="server" ID="RadDockZone3" Orientation="vertical" Style="border: 0px;" FitDocks="true"> |
<telerik:RadDock runat="server" ID="Raddock2" Title="RadDock 3.1"> |
<ContentTemplate> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
... |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
<telerik:RadDock runat="server" ID="Weather" Title="RadDock 3.2"> |
<ContentTemplate> |
<div class="innerWrp"> |
<div class="innerWrp"> |
<br /> |
<br /> |
<br /> |
<br /> |
more content |
<br /> |
... |
<br /> |
<br /> |
</div> |
</div> |
</ContentTemplate> |
</telerik:RadDock> |
</telerik:RadDockZone> |
</td> |
</tr> |
</table> |
</div> |
</telerik:RadDockLayout> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</div> |
</form> |
</body> |
</html> |
Regards