RadControls in TableCells within Master Pages

[Jon-Jon Kershaw]

I have a RadDatePicker in a TableRow1
I have another RadDatePicker in a TableRow2
This table is on a ascx page posting to a master page.
In the design it looks fine but when I debug instead of them being right on top of each other there is a huge space between the rows.
I checked styles and they are not set to anything extraordinary.  
It also does this same thing for a RadComboBox set in a TableCell.

Is there something I need to format or a special property?  Do I have to make a change to the master page to allot for the radcontrols? 

It seems as though the cell is allotting space for the when the javascript works.


Thanks.

[Dimo]

Hi Jon,

Please find attached a sample project, in which the controls work as expected. Let me know what I should change, so that the problem is reproduced.


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon-Jon Kershaw]

OK we have been able to replicate that instance but I guess I needed to be a bit more specific as well as post some code.  the first set is the master page and the second part of code is for the content that we are having issues with. 

	<%@ Page Title="" Language="C#" MasterPageFile="~/App_ThemesCustom/Pro1DotCom/MasterPage.master"
	AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="cui_Default" %>
	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<%@ Register Src="../uc/mas/ucSystemListDropDown.ascx" TagName="ucSystemListDropDown"
	TagPrefix="uc1" %>
	<%@ Register Src="../uc/mas/ucContacts.ascx" TagName="ucContacts" TagPrefix="uc3" %>
	<%@ Register Src="../uc/mas/ucEventHistory.ascx" TagName="ucEventHistory" TagPrefix="uc4" %>
	<%@ Register Src="../uc/mas/ucSchedules.ascx" TagName="ucSchedules" TagPrefix="uc5" %>
	<%@ Register Src="../uc/mas/ucZones.ascx" TagName="ucZones" TagPrefix="uc6" %>
	<%@ Register Src="../uc/mas/ucMailingaddress.ascx" TagName="ucMailingaddress" TagPrefix="uc7" %>
	<%@ Register Src="../uc/mas/ucSiteDetails.ascx" TagName="ucSiteDetails" TagPrefix="uc2" %>
	<%@ Register Src="../uc/mas/ucSystemDetails.ascx" TagName="ucSystemDetails" TagPrefix="uc8" %>
	<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
	<style type="text/css">
	.multiPage
	{
	float: left;
	border: 1px solid #94A7B5; /*background-attachment:#F0F1EB;*/
	padding: 4px;
	padding-left: 0;
	width: 850px;
	height: 420px;
	margin-left: -1px;
	}
	.multiPage div
	{
	border: 0px solid #94A7B5;
	border-left: 0px;
	padding-left: 10px;
	height: 400px; /*background-color:#ECE9D8;*/
	}
	.multiPage img
	{
	cursor: no-drop;
	}
	</style>
	</asp:Content>
	<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
	<asp:UpdatePanel ID="UpdatePanel1" runat="server">
	<ContentTemplate>
	<uc1:ucSystemListDropDown ID="ucSystemListDropDown1" runat="server" />
	</ContentTemplate>
	</asp:UpdatePanel>
	<asp:UpdatePanel ID="UpdatePanel2" runat="server">
	<ContentTemplate>
	<div id="tabcontainerdiv" style="padding-left: 15px; padding-top: 15px; vertical-align: middle;">
	<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="2" MultiPageID="RadMultiPage1"
	Orientation="VerticalLeft" Skin="Outlook"
	ontabclick="RadTabStrip1_TabClick" >
	<Tabs>
	<telerik:RadTab Text="Site Details">
	</telerik:RadTab>
	<telerik:RadTab Text="System Details">
	</telerik:RadTab>
	<telerik:RadTab Text="Mailing Address" Selected="True">
	</telerik:RadTab>
	<telerik:RadTab Text="Contacts">
	</telerik:RadTab>
	<telerik:RadTab Text="Event history">
	</telerik:RadTab>
	<telerik:RadTab Text="Schedules">
	</telerik:RadTab>
	<telerik:RadTab Text="Zones">
	</telerik:RadTab>
	</Tabs>
	</telerik:RadTabStrip>
	<telerik:RadMultiPage runat="server" CssClass="multiPage" ID="RadMultiPage1" SelectedIndex="2"
	title="Protection One Site/System information.">
	<telerik:RadPageView runat="server" ID="PageViewSiteDetail">
	<uc2:ucSiteDetails ID="ucSiteDetails1" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView runat="server" ID="PageViewSystemDetails">
	<uc8:ucSystemDetails ID="ucSystemDetails1" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView runat="server" ID="PageViewMailingAddress">
	<uc7:ucMailingaddress ID="ucMailingaddress1" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView runat="server" ID="PageViewContacts">
	<uc3:ucContacts ID="ucContacts1" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView runat="server" ID="PageViewEventHistory">
	<uc4:ucEventHistory ID="ucEventHistory1" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView runat="server" ID="PageViewSchedules">
	<uc5:ucSchedules ID="ucSchedules1" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView runat="server" ID="PageViewZones">
	<uc6:ucZones ID="ucZones1" runat="server" />
	</telerik:RadPageView>
	</telerik:RadMultiPage>
	</div>
	</ContentTemplate>
	</asp:UpdatePanel>
	</asp:Content>

	<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucEventHistory.ascx.cs"
	Inherits="uc_mas_ucEventHistory" %>
	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<style type="text/css">
	.style1
	{
	width: 114px;
	height: 25px;
	}
	</style>
	<br />
	Data from mastermind here, rules need to be defined by <b>BUSINESS</b><br /><br />
	<div id="EventHistoryContainer">
	<asp:Table runat="server" id="Eventhistorytable" width="700px" style="vertical-align: top">
	<asp:TableRow ID="TableRow1" runat="server">
	<asp:TableCell ID="TableCell1" ColumnSpan="4" HorizontalAlign="center" style="border-bottom-style: double; border-bottom-width: thin;
	border-bottom-color: Navy">
	<h3><asp:Label ID="LabelTitle" runat="server">Event history Selection</asp:Label></h3>
	</asp:TableCell>
	</asp:TableRow>
	<asp:TableRow style="vertical-align: top; height: 25px;" VerticalAlign="top" ID="TableRow2" runat="server">
	<asp:TableCell ID="TableCell2" CssClass="style1">
	<asp:Label ID="Label1" runat="server" Text="Start Date :"></asp:Label>
	</asp:TableCell>
	<asp:TableCell CssClass="style1">
	<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Office2007"
	Culture="English (United States)" Calendar-NavigationCellPadding="0" Calendar-SingleViewColumns="1" Calendar-SingleViewRows="1">
	<DateInput ID="DateInput1" LabelCssClass="radLabelCss_Office2007" Skin="Office2007"
	runat="server">
	</DateInput>
	<Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
	Skin="Office2007" runat="server">
	</Calendar>
	<DatePopupButton runat="server"></DatePopupButton>
	</telerik:RadDatePicker>
	</asp:TableCell>
	<asp:TableCell >
	<asp:Label ID="Label2" runat="server" Text="Start Time :"></asp:Label>
	</asp:TableCell>
	<asp:TableCell>
	&nbsp;
	<telerik:RadTimePicker ID="RadTimePicker1" Runat="server"  Culture="English (United States)"
	Skin="Office2007">
	</telerik:RadTimePicker>
	</asp:TableCell>
	</asp:TableRow>
	<asp:TableRow style="vertical-align: top; height: 25px;" VerticalAlign="top" ID="TableRow3" runat="server">
	<asp:TableCell CssClass="style1">
	<asp:Label ID="Label3" runat="server" Text="End Date :"></asp:Label>
	</asp:TableCell>
	<asp:TableCell>
	<telerik:RadDatePicker ID="RadDatePicker2" runat="server" Skin="Office2007"
	Culture="English (United States)">
	<DateInput ID="DateInput2" LabelCssClass="radLabelCss_Office2007" Skin="Office2007"
	runat="server">
	</DateInput>
	<Calendar ID="Calendar2" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
	Skin="Office2007" runat="server">
	</Calendar>
	<DatePopupButton runat="server"></DatePopupButton>
	</telerik:RadDatePicker>
	</asp:TableCell>
	<asp:TableCell>
	<asp:Label ID="Label4" runat="server" Text="End Time :"></asp:Label></asp:TableCell>
	<asp:TableCell>
	&nbsp;
	<telerik:RadTimePicker ID="RadTimePicker2" Runat="server"  Culture="English (United States)"
	Skin="Office2007">
	</telerik:RadTimePicker>
	</asp:TableCell>
	</asp:TableRow>
	<asp:TableRow  VerticalAlign="top" ID="TableRow4" runat="server">
	<asp:TableCell>
	<asp:Label runat="server" ID="lblMaxEvents" Text="Max Events to Return: "></asp:Label>
	</asp:TableCell>
	<asp:TableCell>
	<telerik:RadComboBox ID="rdcMaxEvents" runat="server">
	<Items>
	<telerik:RadComboBoxItem runat="server" Selected="True" Text="(none)"
	Value="(none)" />
	<telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
	<telerik:RadComboBoxItem runat="server" Text="20" Value="20" />
	<telerik:RadComboBoxItem runat="server" Text="50" Value="50" />
	<telerik:RadComboBoxItem runat="server" Text="100" Value="100" />
	<telerik:RadComboBoxItem runat="server" Text="250" Value="250" />
	<telerik:RadComboBoxItem runat="server" Text="500" Value="500" />
	<telerik:RadComboBoxItem runat="server" Text="1000" Value="1000" />
	</Items>
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</telerik:RadComboBox>
	</asp:TableCell>
	<asp:TableCell ColumnSpan="2">
	</asp:TableCell>
	</asp:TableRow>
	<asp:TableRow  VerticalAlign="top" ID="TableRow5" runat="server">
	<asp:TableCell>
	<asp:Label runat="server" ID="lblGroupBy" Text="Group By Incident? "></asp:Label>
	</asp:TableCell><asp:TableCell>
	<asp:RadioButtonList ID="rblGroupBy" runat="server"
	RepeatDirection="Horizontal" RepeatLayout="Flow">
	<asp:ListItem>Yes</asp:ListItem>
	<asp:ListItem Selected="True">No</asp:ListItem>
	</asp:RadioButtonList>
	</asp:TableCell>
	<asp:TableCell ColumnSpan="2">
	&nbsp;</asp:TableCell>
	</asp:TableRow>
	<asp:TableRow  VerticalAlign="top" ID="TableRow6" runat="server">
	<asp:TableCell>
	<asp:Label runat="server" ID="lblEntireSite" Text="Entire Site? "></asp:Label>
	</asp:TableCell><asp:TableCell>
	<asp:RadioButtonList ID="rblEntireSite" runat="server"
	RepeatDirection="Horizontal" RepeatLayout="Flow">
	<asp:ListItem>Yes</asp:ListItem>
	<asp:ListItem Selected="True">No</asp:ListItem>
	</asp:RadioButtonList></asp:TableCell>
	<asp:TableCell ColumnSpan="2">
	&nbsp;</asp:TableCell>
	</asp:TableRow>
	<asp:TableRow  VerticalAlign="top" ID="TableRow8" runat="server">
	<asp:TableCell>
	<asp:Button ID="btnSearch" runat="server" Text="Search"
	onclick="btnSearch_Click" />
	</asp:TableCell><asp:TableCell>
	&nbsp;</asp:TableCell>
	<asp:TableCell ColumnSpan="2">
	&nbsp;</asp:TableCell>
	</asp:TableRow>
	</asp:Table>
	</div>

[Jon-Jon Kershaw]

Here is the pic too click link.

Pic

[Dimo]

Hi Jon,

Well, you have set a height style, which is inherited by elements, that should not have a height at all:

    .multiPage div 
    { 
        border: 0px solid #94A7B5; 
        border-left: 0px; 
        padding-left: 10px; 
        height: 400px; /*background-color:#ECE9D8;*/ 
    }


Please add this CSS rule after the above one:

    .multiPage div div
    {
        height: auto;   
    }


Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon-Jon Kershaw]

NICE!  I knew it had to be something really minute like that.

Thank you much.