hi guys,
i'm having issue trying to get my splitter to fill 100% of the height of my RadPanelBar item. I'm currently on Q1 2010, basically i've got a CHAT style bar down the side with a splitter inside the RadPanelItem, its got the chat item in the top RadPane and the bottom RadPane is of fixed height (this is where users will enter their comments). but the top pane should stretch to fill whatever space is avalible to it.
See below for my code, the two problem splitters are ChatSplitter and VotingSplitter. any help would be great.
Also please see attached image to see what i mean!
i'm having issue trying to get my splitter to fill 100% of the height of my RadPanelBar item. I'm currently on Q1 2010, basically i've got a CHAT style bar down the side with a splitter inside the RadPanelItem, its got the chat item in the top RadPane and the bottom RadPane is of fixed height (this is where users will enter their comments). but the top pane should stretch to fill whatever space is avalible to it.
See below for my code, the two problem splitters are ChatSplitter and VotingSplitter. any help would be great.
Also please see attached image to see what i mean!
<%@ Page Language="C#" AutoEventWireup="true" Inherits="BusinessPort.WebUI.DataViewers.TaskViewer" |
CodeBehind="TaskViewer.aspx.cs" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<title>Agility User Suite - Task Viewer</title> |
<link href="../../BusinessPort.css" type="text/css" rel="stylesheet" /> |
<style type="text/css"> |
html, body, form |
{ |
margin: 0px; |
padding: 0px; |
height: 100%; |
} |
chatPanelStyle |
{ |
vertical-align: top; |
} |
</style> |
</head> |
<body id="uiTaskPaneBody"> |
<div id="ParentDivElement" style="height: 100%;"> |
<form id="taskViewerForm" runat="server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server" /> |
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RefreshPage" /> |
<telerik:RadCodeBlock runat="server"> |
<script type="text/javascript"> |
function openWin(id) { |
var oWnd = radopen("AuthorisersEdit/AuthorisersEditControl.aspx?DetailsID=" + id, "RadWindow1"); |
} |
function radWindowCallbackEvent() |
{ |
//call AJAX event here to refresh chat... |
var ajaxManager = <%= RadAjaxManager1.ClientID %>; |
var arguments = ''; |
ajaxManager.ajaxRequest(arguments); |
} |
function EnableProceedComment() |
{ |
var commentBox = document.getElementById('RadPanelBar1$i1$i0$uiChatComment'); |
var disableProceed = (commentBox.value.trim() == ""); |
document.getElementById("RadPanelBar1_i1_i0_sendMessage").disabled = disableProceed; |
} |
function EnableProceed() |
{ |
var currentDecision = document.getElementById("uiUsersCurrentDecision").value; |
var commentBox = document.getElementById('RadPanelBar1$i2$i0$uiComment'); |
var disableProceed = (commentBox.value.trim() == ""); |
if(!disableProceed) |
{ |
if(currentDecision != "Fail") |
{ |
document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = false; |
} |
else |
{ |
document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = true; |
} |
} |
else |
{ |
document.getElementById("RadPanelBar1_i2_i0_uiFailRadioButton").disabled = true; |
} |
} |
function scrollPositionBottom(sender, args) |
{ |
var pane = sender.getPaneById('RadPanelBar1_i1_i0_uiChatPaneRadPane'); |
var scrollHeight = pane.getContentElement().scrollHeight; |
pane.setScrollPos(0, scrollHeight - pane.get_height()); |
} |
</script> |
</telerik:RadCodeBlock> |
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" |
Orientation="Vertical" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderSize="0" |
VisibleDuringInit="false" ResizeWithParentPane="true"> |
<telerik:RadPane ID="TopPane" runat="server" MinWidth="400" Width="400" MaxWidth="400" |
Scrolling="none" Height="100%"> |
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100" |
RenderMode="Inline"> |
<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" |
Orientation="Horizontal" EnableEmbeddedSkins="false" PanesBorderSize="0" BorderSize="0" |
VisibleDuringInit="false" ResizeWithParentPane="true"> |
<telerik:RadPane ID="RadPane1" runat="server" MinWidth="400" Width="400" MaxWidth="400" |
Scrolling="none" Height="46"> |
<asp:PlaceHolder ID="uiVotingSummaryTable" runat="server" /> |
<table style="width: 100%;" cellpadding="0" cellspacing="0"> |
<tr> |
<td style="width: 150px;"> |
Your Vote : |
</td> |
<td> |
<asp:Label ID="uiMyCurrentDecision" runat="server"></asp:Label> |
</td> |
</tr> |
<tr> |
<td style="width: 150px;"> |
Document Status : |
</td> |
<td> |
<asp:Label ID="uiDocumentsCurrentDescion" runat="server"></asp:Label> |
</td> |
</tr> |
</table> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="None" EnableResize="false" |
Visible="false" /> |
<telerik:RadPane ID="RadPane2" runat="server" MinWidth="400" Width="400" MaxWidth="400" |
Scrolling="none" Height="100%"> |
<asp:HiddenField ID="uiUsersCurrentDecision" runat="server" /> |
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook" Width="100%" |
Height="100%" ExpandMode="FullExpandedItem" CssClass="TaskViewerText PanelBarTitleText"> |
<Items> |
<telerik:RadPanelItem Text="Summary" Font-Bold="true" Height="32px" Expanded="true" |
runat="server"> |
<Items> |
<telerik:RadPanelItem id="uiSummaryPanel" runat="server"> |
<ItemTemplate> |
<asp:Panel ID="Panel1" runat="server"> |
<div style="margin-left: 3px; margin-right: 3px; width: 400px;"> |
<table class="TaskViewerText"> |
<tr> |
<td> |
Document Number : |
</td> |
<td> |
<asp:Label ID="uiDocumentNumberLabelText" Text="[insert text here]" runat="server" /> |
</td> |
</tr> |
<tr> |
<td> |
Document Title : |
</td> |
<td> |
<asp:Label ID="uiDocumentTitleLabelText" Text="[insert text here]" runat="server" /> |
</td> |
</tr> |
<tr> |
<td> |
Owner : |
</td> |
<td> |
<asp:HyperLink ID="uiDocOwnerLabelText" Text="[insert text here]" runat="server" /> |
</td> |
</tr> |
</tr> |
<tr> |
<td> |
Admin Owner : |
</td> |
<td> |
<asp:HyperLink ID="uiDocAdminOwnerLabelText" Text="[insert text here]" runat="server" /> |
</td> |
</tr> |
<tr> |
<td> |
Due Date : |
</td> |
<td> |
<asp:Label ID="uiDueDateLabelText" Text="[insert text here]" runat="server" /> |
</td> |
</tr> |
</table> |
Administrator Comments : |
<asp:TextBox ID="uiAdministratorComments" ReadOnly="true" TextMode="multiline" Height="125" |
Width="350" runat="server"/> |
<br /> |
Document History Notes : |
<asp:TextBox ID="uiAuditTrailNotes" ReadOnly="true" TextMode="multiline" Height="125" |
Width="350" runat="server"/> |
<asp:Label ID="uiApproverText" Text="[insert text here]" runat="server" /> |
<div style="overflow-x: auto; overflow-y: scroll; height: 125px; width: 350px; padding-left: 2px; |
margin-left: 5px; border: solid 1px #7F9DB9;"> |
<asp:PlaceHolder ID="uiSummaryHeader" runat="server" /> |
</div> |
</div> |
</asp:Panel> |
</ItemTemplate> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelItem> |
<telerik:RadPanelItem Text="Comment History" Height="32px" Font-Bold="true" runat="server"> |
<Items> |
<telerik:RadPanelItem id="uiChatPanel" runat="server"> |
<ItemTemplate> |
<telerik:RadSplitter ID="ChatSplitter" runat="server" Height="97%" Width="398" Orientation="Horizontal" |
ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0" OnClientLoaded = "scrollPositionBottom" |
OnClientResized="scrollPositionBottom"> |
<telerik:RadPane ID="uiChatPaneRadPane" runat="server" Scrolling="Y"> |
<asp:PlaceHolder ID="uiChatConsole" runat="server" /> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="uiTaskViewerSplitBar1" runat="server" CollapseMode="None" |
EnableResize="false" /> |
<telerik:RadPane Height="180" MinHeight="180" MaxHeight="180" ID="TopPane" runat="server" |
Scrolling="none"> |
<div class="TaskViewerText"> |
<div style="text-align: left; margin-top: 5px; margin-left: 10px;"> |
Comment : |
</div> |
<div style="text-align: left; margin-top: 3px; margin-left: 10px;"> |
<asp:TextBox ID="uiChatComment" runat="server" TextMode="multiline" Style="height: 125px; |
width: 350px;"> |
</asp:TextBox> |
</div> |
<div style="text-align: right; margin-top: 10px; margin-right: 10px;"> |
<asp:Button Text="Submit" OnClick="sendMessage_Click" runat="server" Enabled="false" |
ID="sendMessage" Style="width: 100px;"></asp:Button> |
</div> |
</div> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</ItemTemplate> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelItem> |
<telerik:RadPanelItem Text="Voting Summary" Height="32px" Font-Bold="true" runat="server"> |
<Items> |
<telerik:RadPanelItem id="uiVotingPanel" runat="server"> |
<ItemTemplate> |
<telerik:RadSplitter ID="VotingSplitter" runat="server" Height="98%" Width="398" |
Orientation="Horizontal" ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0"> |
<telerik:RadPane ID="uiDocumentPreviewPane" runat="server" Scrolling="Y"> |
<asp:PlaceHolder ID="uiVotingSummary" runat="server" /> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="uiTaskViewerSplitBar2" runat="server" CollapseMode="None" |
EnableResize="false" /> |
<telerik:RadPane Height="200" MinHeight="200" MaxHeight="200" ID="TopPane" runat="server" |
Scrolling="none"> |
<div class="TaskViewerText"> |
<div style="text-align: left; margin-top: 1px; margin-left: 10px;"> |
Vote : |
</div> |
<div style="text-align: left; margin-top: 1px; margin-left: 10px;"> |
<asp:TextBox ID="uiComment" runat="server" TextMode="multiline" Style="height: 140px; |
width: 350px;"> |
</asp:TextBox> |
</div> |
<table style="width: 100%"> |
<tr style="width: 100%"> |
<td style="width: 50%"> |
</td> |
<td style="width: 50%"> |
<div style="text-align: right; margin-top: 10px; margin-bottom: 20px; margin-right: 10px;"> |
<asp:Button Text="Pass" OnClick="sendVotePass_Click" runat="server" ID="uiPassRadioButton" |
Style="width: 75px;"></asp:Button> |
<asp:Button Text="Fail" OnClick="sendVoteFail_Click" runat="server" ID="uiFailRadioButton" |
Style="width: 75px;" Enabled="false"></asp:Button> |
</div> |
</td> |
</tr> |
</table> |
</div> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</ItemTemplate> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelItem> |
</Items> |
</telerik:RadPanelBar> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadAjaxPanel> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="uiTaskViewerSplitBar3" runat="server" CollapseMode="None" |
EnableResize="false" Visible="false" /> |
<telerik:RadPane ID="uiDocumentPreviewPane" runat="server" Scrolling="Both" Width="100%"> |
</telerik:RadPane> |
</telerik:RadSplitter> |
<telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false" |
ReloadOnShow="true" runat="server" Skin="Outlook"> |
<Windows> |
<telerik:RadWindow runat="server" ID="RadWindow1" Behaviors="Close" NavigateUrl="AuthorisersEditControl/AuthorisersEditControl.aspx" |
Width="400px" Height="210px"> |
</telerik:RadWindow> |
</Windows> |
</telerik:RadWindowManager> |
</form> |
</div> |
</body> |
</html> |