Hi
I am using Telerik version 2012.3.1308.40
I'm trying to get the full height/width scenario working with splitter controls, and have followed some of the other posts on here and thought I had it working, until I clicked a button and did a postback.
Attached as 5 screen shots which I will reference through this scenario and also the demo html will be shown here.
To start with here is my stylesheet.css I am using to get the desired look and feel for the master page and therefore web site.
The master page is listed below: This is made up of div's and then using a RadSplitter to hold the contentplaceholder.
I've attached the 3 images used in the master page for the radtoolbar.
Then my page is based on the master page and the code is:
When I run the web app and have the screen maximized I get the desired results (Screen 1.png). If I minimize the screen and re-size it again the splitter is working as I would hope. The screen re-sizes as in (Screen 2.png).
When I press the Select button the RadSplitter is hidden and another one is shown, to show the results. This again is re-sized as I would expect. (Screen 3.png)
The problem now comes with the results showing grab the bottom right corner of the minimized screen and drag you can see the main splitter on the mater page re-sizes but the splitter in the update panel doesn't (Screen 4.png).
I have tried this without the update panel and it works better but of course you get the flash of the screen on postback. Also it doesn't work totally correct as the first splitter retains it's layout until the screen is moved. So if you re-size the screen to make it smaller, press the Select button, then make the screen smaller still, and press the back button, you get scroll bars as the first splitter hasn't re-sized. (Screen 5.png)
Any ideas or help much appreciated.
Thanks
Dale
I am using Telerik version 2012.3.1308.40
I'm trying to get the full height/width scenario working with splitter controls, and have followed some of the other posts on here and thought I had it working, until I clicked a button and did a postback.
Attached as 5 screen shots which I will reference through this scenario and also the demo html will be shown here.
To start with here is my stylesheet.css I am using to get the desired look and feel for the master page and therefore web site.
*
{
margin: 0;
padding: 0;
}
html, body, form
{
height: 100%;
overflow: hidden;
}
.wrapper
{
min-height: 100%;
height: 100%;
margin: 0 auto -59px; /* The bottom margin is the negative value of the footer's height */
position: relative;
}
.header
{
height: 87px;
background-color: Gray;
}
.menustretch
{
height: 26px;
background-color: Black;
}
.toolbar
{
height: 68px;
}
.content
{
height: 100%;
}
.push
{
height: 59px; /* .push must be the same height as .footer */
}
.footer
{
height: 59px; /* .push must be the same height as .footer */
background-color: Gray;
}
The master page is listed below: This is made up of div's and then using a RadSplitter to hold the contentplaceholder.
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="Telerik_RadSplitter_Demo.Site" %>
<%@ 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
runat
=
"server"
>
<
title
></
title
>
<
link
href
=
"../BaseLayout.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
</
head
>
<
body
>
<
div
class
=
"wrapper"
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
div
class
=
"header"
>
</
div
>
<
div
class
=
"menustretch"
>
</
div
>
<
div
class
=
"toolbar"
>
<
telerik:RadToolBar
ID
=
"rtbMainToolbar"
runat
=
"server"
Width
=
"100%"
>
<
Items
>
<
telerik:RadToolBarButton
Text
=
"New"
ToolTip
=
"Add new selection"
ImagePosition
=
"AboveText"
ImageUrl
=
"~/i/Enabled/document_add.png"
></
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
Text
=
"Open"
ToolTip
=
"Open existing selection"
ImagePosition
=
"AboveText"
ImageUrl
=
"~/i/Enabled/document_out.png"
></
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
Text
=
"Edit"
ToolTip
=
"Modify selection"
ImagePosition
=
"AboveText"
ImageUrl
=
"~/i/Enabled/document_edit.png"
></
telerik:RadToolBarButton
>
</
Items
>
</
telerik:RadToolBar
>
</
div
>
<
div
class
=
"content"
>
<
telerik:RadSplitter
ID
=
"rsMainContent"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
HeightOffset
=
"240"
ResizeWithBrowserWindow
=
"true"
ResizeWithParentPane
=
"true"
>
<
telerik:RadPane
ID
=
"rpMainContent"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
div
>
<
div
class
=
"push"
></
div
>
</
form
>
</
div
>
<
div
class
=
"footer"
></
div
>
</
body
>
</
html
>
I've attached the 3 images used in the master page for the radtoolbar.
Then my page is based on the master page and the code is:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Pages/Site.Master" CodeBehind="TestPage.aspx.vb" Inherits="Telerik_RadSplitter_Demo.TestPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
<
asp:UpdatePanel
ID
=
"upTest"
runat
=
"server"
>
<
ContentTemplate
>
<
telerik:RadSplitter
ID
=
"rsSelections"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
VisibleDuringInit
=
"false"
Orientation
=
"Horizontal"
Visible
=
"true"
ResizeWithBrowserWindow
=
"true"
ResizeWithParentPane
=
"true"
>
<
telerik:RadPane
ID
=
"rpSelectionsHeader"
runat
=
"server"
Height
=
"31px"
>
<
asp:Label
ID
=
"lblSelectionsHeader"
runat
=
"server"
Text
=
"Selections"
BackColor
=
"#541954"
ForeColor
=
"White"
Height
=
"25px"
style
=
"display: block; padding-left: 10px; padding-top: 6px;"
></
asp:Label
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"rpSelectionsBody"
runat
=
"server"
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"First Node"
runat
=
"server"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Node 1"
runat
=
"server"
></
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node 2"
runat
=
"server"
></
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node 3"
runat
=
"server"
></
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node 3"
runat
=
"server"
></
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Second Node"
runat
=
"server"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Node 1"
runat
=
"server"
></
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node 2"
runat
=
"server"
></
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node 3"
runat
=
"server"
></
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Node 3"
runat
=
"server"
></
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"rpSelectionsFooter"
runat
=
"server"
>
<
telerik:RadButton
ID
=
"btnSelect"
runat
=
"server"
Text
=
"Select"
>
</
telerik:RadButton
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
<
telerik:RadSplitter
ID
=
"rsResults"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
VisibleDuringInit
=
"false"
Orientation
=
"Horizontal"
Visible
=
"false"
ResizeWithBrowserWindow
=
"true"
ResizeWithParentPane
=
"true"
>
<
telerik:RadPane
ID
=
"rpResultsHeader"
runat
=
"server"
Height
=
"31px"
>
<
asp:Label
ID
=
"lblResultsHeader"
runat
=
"server"
Text
=
"Results"
BackColor
=
"#541954"
ForeColor
=
"White"
Height
=
"25px"
style
=
"display: block; padding-left: 10px; padding-top: 6px;"
></
asp:Label
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"rpResultsBody"
runat
=
"server"
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"rpResultsFooter"
runat
=
"server"
>
<
telerik:RadButton
ID
=
"btnResultsBack"
runat
=
"server"
Text
=
"Back"
>
</
telerik:RadButton
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
</
asp:Content
>
When I run the web app and have the screen maximized I get the desired results (Screen 1.png). If I minimize the screen and re-size it again the splitter is working as I would hope. The screen re-sizes as in (Screen 2.png).
When I press the Select button the RadSplitter is hidden and another one is shown, to show the results. This again is re-sized as I would expect. (Screen 3.png)
The problem now comes with the results showing grab the bottom right corner of the minimized screen and drag you can see the main splitter on the mater page re-sizes but the splitter in the update panel doesn't (Screen 4.png).
I have tried this without the update panel and it works better but of course you get the flash of the screen on postback. Also it doesn't work totally correct as the first splitter retains it's layout until the screen is moved. So if you re-size the screen to make it smaller, press the Select button, then make the screen smaller still, and press the back button, you get scroll bars as the first splitter hasn't re-sized. (Screen 5.png)
Any ideas or help much appreciated.
Thanks
Dale