I have a page that has several nested RadSplitters. The outer one is vertical so I have left and right panes. The right pane contains another RadSplitter that contains 3 panes separated by 2 RadSplitBars. The top pane (ViewPane) has a fixed height, the middle pane is set to height of 100%, and the bottom pane has a fixed height of 100px. The bottom pane contains several controls, one of which is a radCombo box. The issue I have is that the combo box opens lower than the bottom of the screen. I cannot seem to get the pane to properly size so the combo opens up rather than down. I have attached an image of the problem. I am using RadControls for ASPNET AJAX Q2 2008, Telerik Web UI version 2008.2.1001.35. My page's code is below...
Any help or insight would be apprecitated.
--Frank Prevatt
| <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="radTest.aspx.vb" Inherits="UI.radTest" %> |
| <!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></title> |
| <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)"/><!--Fixes IE Page 'Flicker' --> |
| <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)"/><!--Fixes IE Page 'Flicker' --> |
| <link href="StyleSheet.css" type="text/css" rel="STYLESHEET"/> |
| <script type="text/javascript" src="scripts/camobject.js"></script> |
| <script type="text/javascript" src="scripts/swfobject.js"></script> |
| <script type="text/javascript" language="javascript" src="scripts/cookie.js"></script> |
| <script type="text/javascript" src="scripts/Logout.js"></script> |
| <style type="text/css"> |
| .style1 |
| { |
| width: 133px; |
| } |
| .style2 |
| { |
| width: 111px; |
| } |
| .style3 |
| { |
| font-family: Verdana; |
| } |
| </style> |
| </head> |
| <script language="javascript" type="text/javascript"> |
| //removed |
| </script> |
| <body style="margin:0px;height:100%;" scroll="no" bgcolor="#38475a"> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> |
| <!-- Navigation and Header --> |
| <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #cccccc;"> |
| <tr style="background-color: #636c7b;" id="NavRow" runat="server"> |
| <td><img src="images/navspacer.jpg" border="0" width="250px" height="29px" alt="" /></td> |
| <td> |
| <ipc:TabNavigation |
| ID="MyNavBar" runat="server" ActiveTab="5" BackColor="#636C7B" /> |
| </td> |
| <td width="100%" align="right" style="padding-right:4px"><a href="logout.aspx" class="ipcLink">Log Out</a><ipc:ChangePasswordWindow runat="server" ID="ipcChangePasswordWindow" NavigateUrl="ChangePassword.aspx" VisibleOnPageLoad="false" ReloadOnShow="true" Modal="true" ShowContentDuringLoad="false" SkinID="WebBlue" Width="400" Height="400" Behaviors="None" VisibleStatusbar="false" ShowDividerBeforeLink="true" VisibleTitlebar="False" Skin="WebBlue" /></td> |
| <td rowspan="2" width="272px" valign="top"> |
| <ipc:NewsControl ID="myNewsBar" runat="server" BackColor="#636C7B" |
| Height="58px" Width="272px" /> |
| </td> |
| </tr> |
| <tr style="background-color: #636c7b;"> |
| <td style="background-image: url(images/g_nav_bg.jpg); background-repeat: repeat-x; height: 29px" width="250px"> |
| </td> |
| <td id="NavCell" class="NavCell" style="background-image: url(images/g_nav_bg.jpg); background-repeat: repeat-x; |
| height: 29px"> |
| </td> |
| <td style="background-image: url(images/g_nav_bg.jpg); background-repeat: repeat-x; |
| height: 29px"> |
| </td> |
| </tr> |
| </table> |
| <telerik:RadSplitter ID="RadSplitter1" |
| runat="server" |
| Width="100%" |
| Height="100%" |
| HeightOffset="58" |
| Skin="WebBlue" |
| BorderSize="0" |
| PanesBorderSize="0" |
| Orientation = "Vertical" |
| BorderWidth="0"> |
| <telerik:RadPane ID="leftPane" |
| runat="server" |
| Width="268px" |
| Scrolling="None" |
| Height="" |
| OnClientPaneExpanded="PaneExpanded" |
| OnClientPaneCollapsed="PaneCollapsed" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <telerik:RadSplitter ID="RadSplitter2" |
| runat="server" |
| Width="100%" |
| Height="100%" |
| Skin="WebBlue" |
| BorderSize="0" |
| PanesBorderSize="0" |
| Orientation="Horizontal" |
| BorderWidth="0"> |
| <telerik:RadPane ID="tabPane" |
| runat="server" |
| Width="100%" |
| Scrolling="None" |
| Height="28px" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#D1D8E2"> |
| <tr> |
| <td height="28px" valign="top"> |
| <a href="lpr_search.aspx"> |
| <img src="images/search_front.jpg" alt="" border="0" width="90" height="28" /> |
| </a> |
| </td> |
| <td id="RTTab" runat="server" height="28px" valign="top"> |
| <a href="lpr_realtime.aspx"> |
| <img src="images/Real-Time_back.jpg" alt="" border="0" width="89" height="28" /> |
| </a> |
| </td> |
| <td id="WLTab" runat="server" height="28px" valign="top"> |
| <a href="lpr_watchlist.aspx"> |
| <img src="images/watchlist_back.jpg" alt="" border="0" width="90" height="28" /> |
| </a> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="None" EnableResize="false"/> |
| <telerik:RadPane ID="navigationPane" |
| runat="server" |
| Width="100%" |
| Scrolling="None" |
| Height="100%" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <telerik:RadTreeView |
| ID="RadTreeView1" |
| runat="server" |
| Width="100%" |
| Height="100%" |
| BackColor="#D1D8E2" |
| AutoPostBack="True" |
| OnClientNodeChecked="AfterCheckHandler" |
| OnClientNodePopulated="AfterClientToggle" |
| OnClientNodeExpanded="onClientNodeToggle" |
| OnClientNodeCollapsed="onClientNodeToggle" |
| CheckBoxes="true" |
| MultipleSelect="true" |
| OnNodeExpand="RadTreeView1_NodeExpand" |
| LoadingMessage="(loading...)"> |
| </telerik:RadTreeView> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" EnableResize="false"/> |
| <telerik:RadPane ID="rightPane" |
| runat="server" |
| Width="100%" |
| Scrolling="None" |
| Height="100%" |
| BackColor="#232323" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <telerik:RadSplitter ID="RadSplitter3" |
| runat="server" |
| Width="100%" |
| Height="100%" |
| Skin="WebBlue" |
| BorderSize="0" |
| Orientation="Horizontal" |
| PanesBorderSize="0" |
| BorderWidth="0"> |
| <telerik:RadPane ID="ViewPane" |
| runat="server" |
| Width="100%" |
| Scrolling="None" |
| Height="350px" |
| BackColor="#232323" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <iframe id="viewFrame" src="lpr_wmplayback.aspx" frameborder="0" width="100%" height="350px" scrolling="no"></iframe> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar3" runat="server" CollapseMode="None" EnableResize="false"/> |
| <telerik:RadPane ID="ResultsPane" |
| runat="server" |
| Width="50%" |
| Scrolling="None" |
| Height="100%" |
| BackColor="#D1D8E2" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <iframe id="gridFrame" src="lpr_radgrid.aspx" frameborder="0" width="100%" height="100%" runat="server" scrolling="no"></iframe> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitbar4" runat="server" CollapseMode="Backward" EnableResize="true"/> |
| <telerik:RadPane ID="CriteriaPane" |
| runat="server" |
| Width="100%" |
| Scrolling="None" |
| Height="100px" |
| BackColor="#D1D8E2" |
| BorderStyle="None" |
| BorderWidth="0px" |
| BorderColor="#D1D8E2"> |
| <table border="0" id="tblCriteria" cellpadding="1" cellspacing="1" width="100%" class="ArchiveGrid"> |
| <tr> |
| <td align="right" nowrap="nowrap">Search Plate Number:</td> |
| <td align="left" nowrap="nowrap"> |
| <telerik:RadTextBox ID="txtPlateNum" runat="server" TextMode="SingleLine" Width="100px"> |
| </telerik:RadTextBox> |
| </td> |
| <td align="right" nowrap="nowrap">Accuracy:</td> |
| <td align="left" nowrap="nowrap"> |
| <telerik:RadNumericTextBox ID="txtAccuracy" runat="server" MaxValue="100" MinValue="25" Type="Percent" Width="80px" ShowSpinButtons="True" ClientEvents-OnValueChanged="txtAccuracy_OnValueChanged"> |
| </telerik:RadNumericTextBox> |
| </td> |
| <td align="right" nowrap="nowrap">Start Date:</td> |
| <td align="left" nowrap="nowrap"> |
| <telerik:RadDatePicker ID="StartDatePicker" runat="server"> |
| </telerik:RadDatePicker> |
| <asp:RequiredFieldValidator runat="server" ID="rfvStartDate" ControlToValidate="StartDatePicker" ErrorMessage="Valid Date Required" /> |
| </td> |
| <td align="right" nowrap="nowrap">End Date:</td> |
| <td align="left" nowrap="nowrap"> |
| <telerik:RadDatePicker ID="EndDatePicker" runat="server"> |
| </telerik:RadDatePicker> |
| <asp:RequiredFieldValidator runat="server" ID="rfvEndDate" ControlToValidate="EndDatePicker" ErrorMessage="Valid Date Required" /> |
| </td> |
| <td align="right" nowrap="nowrap"> |
| <asp:Button ID="btn_Search" runat="server" BackColor="White" Text="Search" Width="60px" style="font-weight: bold; margin: 5px; font-size: 8pt; width: 60px; color: #383838; height: 22px; background-color: #a7b7c6;" /> |
| </td> |
| </tr> |
| <tr> |
| <td align="right" nowrap="nowrap">Defined Searches:</td> |
| <td align="left" colspan="3" nowrap="nowrap"> |
| <telerik:RadComboBox ID="cboDefinedSearches" runat="server"> |
| </telerik:RadComboBox> |
| </td> |
| <td align="right" nowrap="nowrap">Start Time:</td> |
| <td align="left" nowrap="nowrap"> |
| <telerik:RadTimePicker ID="StartTimePicker" runat="server"> |
| </telerik:RadTimePicker> |
| <asp:RequiredFieldValidator runat="server" ID="rfvStartTime" ControlToValidate="StartTimePicker" ErrorMessage="Valid Time Required" /> |
| </td> |
| <td align="right" nowrap="nowrap">End Time:</td> |
| <td align="left" nowrap="nowrap"> |
| <telerik:RadTimePicker ID="EndTimePicker" runat="server"> |
| </telerik:RadTimePicker> |
| <asp:RequiredFieldValidator runat="server" ID="rfvEndTime" ControlToValidate="EndTimePicker" ErrorMessage="Valid Time Required" /> |
| </td> |
| <td nowrap="nowrap"> </td> |
| </tr> |
| <tr> |
| <td align="right" nowrap="nowrap">Search Watch List:</td> |
| <td align="left" colspan="3" nowrap="nowrap"> |
| <telerik:RadComboBox ID="cboWatchList" runat="server"> |
| </telerik:RadComboBox> |
| </td> |
| <td colspan="2" nowrap="nowrap"> </td> |
| <td colspan="2" nowrap="nowrap"> |
| <asp:CompareValidator ID="dcvSearch" runat="server" ControlToValidate="EndDatePicker" ControlToCompare="StartDatePicker" Operator="GreaterThanEqual" Type="Date" ErrorMessage="The end date must be on or after the start date.<br /><br />" /> |
| </td> |
| <td nowrap="nowrap"> </td> |
| </tr> |
| </table> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| <telerik:RadWindowManager ID="RadWindowManager1" runat="server"> |
| <ConfirmTemplate> |
| <div class="windowpopup radconfirm"> |
| <div class="dialogtext"> {1} </div> |
| <div> |
| <a onclick="$find('{0}').callBack(true);" |
| class="radwindowbutton" |
| href="javascript:void(0);" > |
| <span class="outerspan"> |
| <span class="innerspan">##LOC[Yes]##</span> |
| </span> |
| </a> |
| <a onclick="$find('{0}').callBack(false);" |
| class="radwindowbutton" |
| href="javascript:void(0);"> |
| <span class="outerspan"> |
| <span class="innerspan">##LOC[No]##</span> |
| </span> |
| </a> |
| </div> |
| </div> |
| </ConfirmTemplate> |
| <Windows> |
| <telerik:RadWindow ID="RadAddWindow" runat="server" Animation="None" Behavior="Default" Behaviors="Default" InitialBehaviors="None" InitialBehavior="None" Left="" NavigateURL="lpr_addToWL.aspx" VisibleOnPageLoad="false" ReloadOnShow="true" Modal="true" Top="" ShowContentDuringLoad="false" Skin="WebBlue" Width="270" Height="190" VisibleStatusbar="false" VisibleTitlebar="false"></telerik:RadWindow> |
| <telerik:RadWindow ID="RadVerifyWindow" |
| runat="server" |
| Animation="None" |
| Behavior="Default" |
| Behaviors="Default" |
| InitialBehaviors="None" |
| InitialBehavior="None" |
| Left="" |
| NavigateURL="lpr_addToWL.aspx" |
| VisibleOnPageLoad="false" |
| ReloadOnShow="true" |
| Modal="true" |
| Top="" |
| ShowContentDuringLoad="false" |
| Skin="WebBlue" Width="460" |
| Height="490" |
| VisibleStatusbar="false" |
| VisibleTitlebar="false"></telerik:RadWindow> |
| <telerik:RadWindow ID="RadStatsWindow" |
| runat="server" |
| Animation="None" |
| Behavior="Default" |
| Behaviors="Default" |
| InitialBehaviors="None" |
| InitialBehavior="None" |
| Left="" |
| NavigateURL="lpr_visitchart.aspx" |
| VisibleOnPageLoad="false" |
| ReloadOnShow="true" |
| Modal="true" |
| Top="" |
| ShowContentDuringLoad="false" |
| Skin="WebBlue" |
| Width="640" |
| Height="710" |
| VisibleStatusbar="false" |
| VisibleTitlebar="true"></telerik:RadWindow> |
| </Windows> |
| </telerik:RadWindowManager> |
| </form> |
| </body> |
| </html> |
Any help or insight would be apprecitated.
--Frank Prevatt
3 Answers, 1 is accepted
0
Hi Frank,
You have not set the height for the HTML and FORM elements. That is why, the splitter cannot become 100% of its parent element. Please add the following to your HEAD:
You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property).
Greetings,
Tsvetie
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.
You have not set the height for the HTML and FORM elements. That is why, the splitter cannot become 100% of its parent element. Please add the following to your HEAD:
html, body, form{ height:100%; margin:0px; padding:0px;}You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property).
Greetings,
Tsvetie
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
Frank
Top achievements
Rank 1
Rank 1
answered on 26 Mar 2010, 02:52 PM
Thanks for the quick response.
I saw that in some other posts and tried adding it to the page. I subsequently removed it when it had no effect on the issue. I have added it back...the combo still drops below the bottom of the pane. The RadPane is still larger than the window. See attached images.
I saw that in some other posts and tried adding it to the page. I subsequently removed it when it had no effect on the issue. I have added it back...the combo still drops below the bottom of the pane. The RadPane is still larger than the window. See attached images.
0
Hello Frank,
I tested your code with the latest version of the Telerik.Web.UI assembly (2010.1 309) in IE7, IE8 and FF and the popup element of the combobox opened as expected above the combobox. The height of the splitter control was as high as the page, minus 58 pixels, just as you have configured it. I have attached my test page for your reference. Could you please open a new support ticket and send me a simple running project that demonstrates the problem you have?
Kind regards,
Tsvetie
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.
I tested your code with the latest version of the Telerik.Web.UI assembly (2010.1 309) in IE7, IE8 and FF and the popup element of the combobox opened as expected above the combobox. The height of the splitter control was as high as the page, minus 58 pixels, just as you have configured it. I have attached my test page for your reference. Could you please open a new support ticket and send me a simple running project that demonstrates the problem you have?
Kind regards,
Tsvetie
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.