RadDatePicker warp "div" size

8 posts, 0 answers
  1. Andrea D'Orio
    Andrea D'Orio avatar
    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>  
        &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>

            <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.


  2. Dimo
    Admin
    Dimo avatar
    8330 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>  
        &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>

            <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrea D'Orio
    Andrea D'Orio avatar
    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.
  5. Dimo
    Admin
    Dimo avatar
    8330 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.
  6. Andrea D'Orio
    Andrea D'Orio avatar
    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
  7. Dimo
    Admin
    Dimo avatar
    8330 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.
  8. Andrea D'Orio
    Andrea D'Orio avatar
    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
  9. Dimo
    Admin
    Dimo avatar
    8330 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017