Hi Telerik,
I am attempting to have my RadSplitter be 100% (-few pixels) of the browser windows height.
This is my relevant HTML mark-up.
I went ahead and tried setting RadSplitter1's height to 100%. This caused its height to be nothing, though, since it has no content inside of it that would force its height to stay larger.
I tried setting all of its parent controls (RadMultipPage/RadPageView)'s heights to 100%, as well. I saw the same results.
Do I need to do something like in this kb article except capturing the height of the window? How would I go about doing that, if so. If not, what steps do I need to take?
Regards,
Sean
I am attempting to have my RadSplitter be 100% (-few pixels) of the browser windows height.
This is my relevant HTML mark-up.
<
div
class
=
"style1"
>
<
br
/>
<
br
/>
CableSolve Web Dashboard
<
br
/>
<
br
/>
<
br
/>
</
div
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
onclick
=
"Button1_Click"
Text
=
"Refresh All Graphs"
/>
<
telerik:RadButton
ID
=
"RadButton3"
runat
=
"server"
onclick
=
"RadButton3_Click"
Skin
=
"Web20"
Text
=
"Add Tab"
>
</
telerik:RadButton
>
<
br
/>
<
telerik:RadTabStrip
ID
=
"RadTabStrip1"
runat
=
"server"
MultiPageID
=
"RadMultiPage1"
SelectedIndex
=
"0"
Skin
=
"Web20"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Home"
Selected
=
"True"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"RadMultiPage1"
Runat
=
"server"
SelectedIndex
=
"0"
>
<
telerik:RadPageView
ID
=
"RadPageView1"
runat
=
"server"
><
telerik:RadDockLayout
ID
=
"RadDockLayout1"
Runat
=
"server"
onloaddocklayout
=
"RadDockLayout_LoadDockLayout"
onsavedocklayout
=
"RadDockLayout_SaveDockLayout"
><
telerik:RadSplitter
ID
=
"RadSplitter1"
Runat
=
"server"
BorderSize
=
"0"
Height
=
"600px"
Skin
=
"Web20"
Width
=
"100%"
><
telerik:RadPane
ID
=
"RadPane1"
Runat
=
"server"
CssClass
=
"leftRoundedCorners"
Scrolling
=
"None"
Width
=
"20px"
><
telerik:RadSlidingZone
ID
=
"RadSlidingZone1"
Runat
=
"server"
ClickToOpen
=
"True"
OnClientLoaded
=
"OnClientSlidingZoneLoaded"
Width
=
"20px"
><
telerik:RadSlidingPane
ID
=
"RadSlidingPane1"
Runat
=
"server"
BackColor
=
"#ECF4FD"
IconUrl
=
"./Icons/document--pencil.png"
MinWidth
=
"160"
Scrolling
=
"Y"
TabView
=
"ImageOnly"
Title
=
"Settings"
Width
=
"160px"
><
telerik:RadListBox
ID
=
"lstBxSettings"
runat
=
"server"
EnableDragAndDrop
=
"True"
onclientdragging
=
"OnClientDragging"
ondropped
=
"LstBxSettings_Dropped"
ondropping
=
"LstBxSettings_Dropping"
Skin
=
"Web20"
Width
=
"100%"
><
ButtonSettings
TransferButtons
=
"All"
/><
Items
><
telerik:RadListBoxItem
Text
=
"Horizontal Bar"
/><
telerik:RadListBoxItem
Text
=
"Vertical Bar"
/></
Items
></
telerik:RadListBox
></
telerik:RadSlidingPane
><
telerik:RadSlidingPane
ID
=
"RadSlidingPane2"
Runat
=
"server"
BackColor
=
"#ECF4FD"
IconUrl
=
"./Icons/chart-pie-separate.png"
MinWidth
=
"160"
Scrolling
=
"Y"
TabView
=
"ImageOnly"
Title
=
"Custom Widgets"
><
telerik:RadListBox
ID
=
"lstBxCustom"
runat
=
"server"
EnableDragAndDrop
=
"True"
onclientdragging
=
"OnClientDragging"
ondropped
=
"RadListBox_Dropped"
Skin
=
"Web20"
Sort
=
"Ascending"
Width
=
"100%"
><
ButtonSettings
TransferButtons
=
"All"
/></
telerik:RadListBox
></
telerik:RadSlidingPane
><
telerik:RadSlidingPane
ID
=
"RadSlidingPane3"
Runat
=
"server"
BackColor
=
"#ECF4FD"
IconUrl
=
"./Icons/chart-up-color.png"
MinWidth
=
"160"
Scrolling
=
"Y"
TabView
=
"ImageOnly"
Title
=
"Historical Widgets"
Width
=
"160px"
><
telerik:RadListBox
ID
=
"lstBxHistorical"
runat
=
"server"
EnableDragAndDrop
=
"True"
onclientdragging
=
"OnClientDragging"
ondropped
=
"RadListBox_Dropped"
Skin
=
"Web20"
Sort
=
"Ascending"
Width
=
"100%"
></
telerik:RadListBox
></
telerik:RadSlidingPane
></
telerik:RadSlidingZone
></
telerik:RadPane
><
telerik:RadPane
ID
=
"RadPane2"
Runat
=
"server"
BackColor
=
"White"
BorderColor
=
"White"
CssClass
=
"rightRoundedCorners"
Scrolling
=
"None"
><
telerik:RadDockZone
ID
=
"RadDockZone1"
Runat
=
"server"
BorderWidth
=
"0px"
CssClass
=
"rightRoundedCorners"
HighlightedCssClass
=
"zoneClass"
MinHeight
=
"100%"
Skin
=
"Web20"
></
telerik:RadDockZone
></
telerik:RadPane
></
telerik:RadSplitter
></
telerik:RadDockLayout
></
telerik:RadPageView
>
</
telerik:RadMultiPage
>
<
div
style
=
"width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;"
>
<
asp:UpdatePanel
runat
=
"server"
ID
=
"UpdatePanel1"
>
</
asp:UpdatePanel
>
</
div
>
<
div
style
=
"text-align: center;"
>
<
telerik:RadButton
ID
=
"RadButton1"
runat
=
"server"
Skin
=
"Web20"
Text
=
"More"
ButtonType
=
"LinkButton"
CssClass
=
"buttons"
onclick
=
"RadButton1_Click"
>
<
Icon
SecondaryIconUrl
=
"./Icons/document--plus.png"
/>
</
telerik:RadButton
>
<
telerik:RadButton
ID
=
"RadButton2"
runat
=
"server"
Skin
=
"Web20"
Text
=
"Less"
ButtonType
=
"LinkButton"
CssClass
=
"buttons"
onclick
=
"RadButton2_Click"
>
<
Icon
SecondaryIconUrl
=
"./Icons/document--minus.png"
/>
</
telerik:RadButton
>
</
div
>
<
br
/>
<
div
class
=
"style2"
>
©2011 Cormant, Inc.
</
div
>
I went ahead and tried setting RadSplitter1's height to 100%. This caused its height to be nothing, though, since it has no content inside of it that would force its height to stay larger.
I tried setting all of its parent controls (RadMultipPage/RadPageView)'s heights to 100%, as well. I saw the same results.
Do I need to do something like in this kb article except capturing the height of the window? How would I go about doing that, if so. If not, what steps do I need to take?
Regards,
Sean