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

RadControls in TableCells within Master Pages

5 Answers 32 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jon-Jon Kershaw
Top achievements
Rank 2
Jon-Jon Kershaw asked on 17 Dec 2008, 11:29 PM
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.

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Dec 2008, 09:13 AM
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.
0
Jon-Jon Kershaw
Top achievements
Rank 2
answered on 18 Dec 2008, 07:46 PM
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> 
 
 
 
0
Jon-Jon Kershaw
Top achievements
Rank 2
answered on 18 Dec 2008, 08:03 PM
Here is the pic too click link.

Pic

0
Accepted
Dimo
Telerik team
answered on 20 Dec 2008, 08:14 AM
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.
0
Jon-Jon Kershaw
Top achievements
Rank 2
answered on 22 Dec 2008, 03:33 PM
NICE!  I knew it had to be something really minute like that.

Thank you much.
Tags
General Discussions
Asked by
Jon-Jon Kershaw
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Jon-Jon Kershaw
Top achievements
Rank 2
Share this question
or