This is a migrated thread and some comments may be shown as answers.

Splitter inside of a RadPanelBar not filling height 100%

7 Answers 134 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 2
Kevin asked on 07 Apr 2010, 12:25 PM
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!

<%@ 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> 

7 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 2
answered on 07 Apr 2010, 12:28 PM
not sure my image attached the first time. lets try that again!
0
Kevin
Top achievements
Rank 2
answered on 13 Apr 2010, 04:59 PM
Anyone got any ideas on this??
0
Accepted
Yana
Telerik team
answered on 14 Apr 2010, 09:02 AM
Hi Kevin,

We're so sorry for the delayed reply.

I've modified your code to demonstrate how to achieve this with "ChatSplitter", you can use the same approach for the other splitter. Please download the attached file and give it a try.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Kevin
Top achievements
Rank 2
answered on 14 Apr 2010, 09:52 AM
Yana,
Thanks for the effort, however the Splitter is still not stretching??

please see attatched image for deails.
0
Yana
Telerik team
answered on 15 Apr 2010, 03:11 PM
Hello kevin,

It is working as expecting in the test page I've sent in my previous, could you please send us a live url where we could observe the issue? Thanks in advance

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Kevin
Top achievements
Rank 2
answered on 18 May 2010, 04:30 PM
Yana,
Never mind managed to remedy this now!
thanks very much for your help!
0
Greg
Top achievements
Rank 1
answered on 08 Mar 2014, 05:51 PM
Can you share your solution? Thanks.
Tags
PanelBar
Asked by
Kevin
Top achievements
Rank 2
Answers by
Kevin
Top achievements
Rank 2
Yana
Telerik team
Greg
Top achievements
Rank 1
Share this question
or