RadDatePicker warp "div" size in UI for ASP.NET AJAX Calendar

Andrea D'Orio

12 posts

Member since:
Mar 2007

Posted 29 Dec 2008 Link to this post

Hello, I have an issue with a RadDatePicker. Seems that it warp the size of "div" where it is included. I use the following code:

<div id="motoreRicerca">
<script type="text/javascript">
    function ToggleFirstPopup()
    {
        $find("<%= RadDate_DataDa.ClientID %>").showPopup();
    }

  <asp:Label ID="lblDataDa" runat="server">Da:</asp:Label>
     <telerik:RadDatePicker ID="RadDate_DataDa" Style="vertical-align: middle;"
       runat="server" Skin="Hay" Width="93px">

        <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Office2007"></Calendar>

        <DatePopupButton Visible="true"></DatePopupButton>
        <DateInput onclick="ToggleFirstPopup()" Width="93px">
        </DateInput>
    </telerik:RadDatePicker>
</div>

The problem isn't exist if I remove RadDatePicker control.
Could you please let me know some input to solve this strange behaviour?

Thanks & Regards.

Dimo

Admin

8478 posts

Posted 29 Dec 2008 Link to this post

Hi Andrea,

You are missing a closing </script> tag. I don't see any other problems with the provided code.

<div id="motoreRicerca">
<script type="text/javascript">
    function ToggleFirstPopup()
    {
        $find("<%= RadDate_DataDa.ClientID %>").showPopup();
    }
</script>
  <asp:Label ID="lblDataDa" runat="server">Da:</asp:Label>
     <telerik:RadDatePicker ID="RadDate_DataDa" Style="vertical-align: middle;"
       runat="server" Skin="Hay" Width="93px">

        <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Office2007"></Calendar>

        <DatePopupButton Visible="true"></DatePopupButton>
        <DateInput onclick="ToggleFirstPopup()" Width="93px">
        </DateInput>
    </telerik:RadDatePicker>
</div>

Regards,
Dimo
the Telerik team

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

Andrea D'Orio

12 posts

Member since:
Mar 2007

Posted 29 Dec 2008 Link to this post

Hi Dimo,
Unfortunately this is only a mistake during copy&paste operation, the </script> tag is present in my code.

Thanks anyway,
Andrea.

Dimo

Admin

8478 posts

Posted 29 Dec 2008 Link to this post

Hi Andrea,

Well, everything works fine on my test page, here it is:

(By the way, please remove the DateInput's width, you should only use Width for the DatePicker control itself)

    
            <%@ Page Language="C#" %> 
        
            <%@ 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"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <div id="motoreRicerca" style="border:1px solid red"> 
        
            <script type="text/javascript"> 
        
                function ToggleFirstPopup() 
        
                { 
        
                    $find("<%= RadDate_DataDa.ClientID %>").showPopup(); 
        
                }    
        
            </script> 
        
                <asp:Label ID="lblDataDa" runat="server">Da:</asp:Label>   
        
                &nbsp;<telerik:RadDatePicker ID="RadDate_DataDa" Style="vertical-align: middle;" 
        
                   runat="server" Skin="Hay" Width="93px"> 
        
                    <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Office2007"></Calendar> 
        
                    <DateInput onclick="ToggleFirstPopup()" /> 
        
                </telerik:RadDatePicker> 
        
            </div> 
        
            </form> 
        
            </body> 
        
            </html>

Sincerely yours,
Dimo
the Telerik team

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

Andrea D'Orio

12 posts

Member since:
Mar 2007

Posted 30 Dec 2008 Link to this post

Hi Dimo,
I see that the issue is caused by table created by calendar where the margin is not 0px and the div container is wrapped.
Is there a way to use the component without create the table style or change the table properties properly?

Thanks,
Andrea

Dimo

Admin

8478 posts

Posted 31 Dec 2008 Link to this post

Hi Andrea,

I am not very sure how to reproduce this problem. I suppose that there are some external CSS styles, which are inherited by the DatePicker control.

Please provide a simple web page (similar to the one I provided in my prevous post), so that I can test and give further advice.

Greetings,
Dimo
the Telerik team

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

Andrea D'Orio

12 posts

Member since:
Mar 2007

Posted 07 Jan 2009 Link to this post

Hi Dimo,
it is a CSS issue for TABLE and TD element. I have solved changing css style.

Anyway, is there a way to use component without create table at runtime?

Thanks for your support,
Andrea

Dimo

Admin

8478 posts

Posted 08 Jan 2009 Link to this post

Hello Andrea,

I am afraid that table-less rendering for RadDatePicker is not supported out-of the box for the moment. This limitation is caused by the requirement that the control consists of several elements (textbox, image button) and it should behave like an inline-block element.

Kind regards,
Dimo
the Telerik team

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