Datepicker Popup Render Issue

4 posts, 0 answers
  1. Mick
    Mick avatar
    27 posts
    Member since:
    Mar 2008

    Posted 09 Jul 2008 Link to this post

    I am having a problem with a date picker when it is inside a table. The popup as far far too large, and I cant understand why.

    I have nothing strange in my CSS that I can think would case this:

    1 /* Table Styles */ 
    2 table {  
    3     width:90%;  
    4     margin:1em auto;  
    5     border-collapse:collapse;  
    6     font-size13px;  
    7     float:left;  
    8     }  
    9       
    10 caption {  
    11     color#9ba9b4;  
    12     font-size:13px;  
    13         letter-spacing:.1em;  
    14         margin:1em 0 0 0;  
    15         padding:0;  
    16         captioncaption-side:top;  
    17         text-align:left;  
    18     }     
    19 tr.odd td   {  
    20     background:#f7fbff 
    21     }  
    22 tr.odd .column1 {  
    23     background:#f4f9fe;  
    24     }     
    25 .column1    {  
    26     background:#f9fcfe;  
    27     }  
    28 td {  
    29     color:#678197;  
    30     padding:.3em 1em;  
    31     text-alignleft;  
    32     }                 
    33 th {  
    34     font-weight:normal;  
    35     color#678197;  
    36     text-align:left;  
    37     padding:.3em 1em;  
    38     }                             
    39 thead th {  
    40     background:#f4f9fe;  
    41     text-align:center;  
    42     font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;  
    43     color:#66a3d3 
    44     }     
    45 tfoot th {  
    46     text-align:center;  
    47     background:#f4f9fe;  
    48     }     
    49 tfoot th strong {  
    50     font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;  
    51     margin:.5em .5em .5em 0;  
    52     color:#66a3d3;  
    53         }         
    54 tfoot th em {  
    55     color:#f03b58;  
    56     font-weightbold;  
    57     font-size: 1.1em;  
    58     font-stylenormal;  
    59     }    

    Here is my control declaration:

    <tr> 
                <th class="column1" scope="row">  
                    Visit Date</th> 
                <td> 
                    <telerik:RadDatePicker ID="dpVisitDate" runat="server" MinDate="1910-01-01" Skin="Vista" 
                        TabIndex="1" Culture="English (United Kingdom)">  
                        <DateInput LabelCssClass="radLabelCss_Vista" Skin="Vista" TabIndex="1" InvalidStyleDuration="100">  
                        </DateInput> 
                        <Calendar  
                            Skin="Vista">  
                        </Calendar> 
                        <DatePopupButton TabIndex="1" /> 
                    </telerik:RadDatePicker> 
                    
        
     
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="dpVisitDate" 
                        ErrorMessage="(*)" ValidationGroup="vgForm"></asp:RequiredFieldValidator></td>  
    </tr> 

    Anyone have any ideas?
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 09 Jul 2008 Link to this post

    Hello Mick,

    You are setting global CSS styles, which apply to all table elements on the page, including RadCalendar. You have two options:

    1) Use CSS classes for the elements, which you want to style with CSS styles and this way your styles will not influence RadCalendar.

    2) Use a CssClass for the RadCalendar to override the global styles:

    <telerik:RadDatePicker>
          <Calendar  Width="230px"  CssClass="CalendarClass"  Skin="Vista"   />
    </telerik:RadDatePicker>


    I would recommend using option (1).


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Mick
    Mick avatar
    27 posts
    Member since:
    Mar 2008

    Posted 09 Jul 2008 Link to this post

    I thought I would give both your solutions a try,
    option 1 worked great for the datepicker, however for a time picker it does not work.

    Option 2, I changed all my table related CSS to the following:
    .mytable {  
        width:90%;  
        margin:1em auto;  
        border-collapse:collapse;  
        font-size13px;  
        float:left;  
        }  
          
    .mytable caption {  
        color#9ba9b4;  
        font-size:13px;  
            letter-spacing:.1em;  
            margin:1em 0 0 0;  
            padding:0;  
            captioncaption-side:top;  
            text-align:left;  
              
        }     
    .mytable td {  
        color:#678197;  
        padding:.3em 1em;  
        text-alignleft;  
        }                 
    .mytable th {  
        font-weight:normal;  
        color#678197;  
        text-align:left;  
        padding:.3em 1em;  
        background:#f9fcfe;  
        text-transform:uppercase;  
        }                             
    .mytable thead th {  
        background:#f4f9fe;  
        text-align:center;  
        font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;  
        color:#66a3d3 
        }     
    .mytable tfoot th {  
        text-align:center;  
        background:#f4f9fe;  
        }     
    .mytable tfoot th strong {  
        font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;  
        margin:.5em .5em .5em 0;  
        color:#66a3d3;  
            }         
    .mytable tfoot th em {  
        color:#f03b58;  
        font-weightbold;  
        font-size: 1.1em;  
        font-stylenormal;  
        }    
    However this has no effect to the popups at all.

    Any help you could give would be great.
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 09 Jul 2008 Link to this post

    Hello Mick,

    Well, in the case when you use the mytable CSS class in your stylesheet, the CSS rules will be applied only to those tables, which have this CSS class. The pickers, Calendar and TimeView do not have this class by default, but you can add it if you want to.

    However, if I am not mistaken, your custom styles are not targeted at the pickers and their popups, but at some other tables in your pages. So now you have to add the mytable CSS class to the desired tables.

    Let us know if you need further advice.


    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top