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

Datepicker Popup Render Issue

3 Answers 131 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Mick
Top achievements
Rank 1
Mick asked on 09 Jul 2008, 10:44 AM

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:

/* Table Styles */ 
table {  
    width:90%;  
    margin:1em auto;  
    border-collapse:collapse;  
    font-size13px;  
    float:left;  
    }  
      
caption {  
    color#9ba9b4;  
    font-size:13px;  
        letter-spacing:.1em;  
        margin:1em 0 0 0;  
        padding:0;  
        captioncaption-side:top;  
        text-align:left;  
    }     
tr.odd td   {  
    background:#f7fbff 
    }  
tr.odd .column1 {  
    background:#f4f9fe;  
    }     
.column1    {  
    background:#f9fcfe;  
    }  
td {  
    color:#678197;  
    padding:.3em 1em;  
    text-alignleft;  
    }                 
th {  
    font-weight:normal;  
    color#678197;  
    text-align:left;  
    padding:.3em 1em;  
    }                             
thead th {  
    background:#f4f9fe;  
    text-align:center;  
    font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;  
    color:#66a3d3 
    }     
tfoot th {  
    text-align:center;  
    background:#f4f9fe;  
    }     
tfoot th strong {  
    font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;  
    margin:.5em .5em .5em 0;  
    color:#66a3d3;  
        }         
tfoot th em {  
    color:#f03b58;  
    font-weightbold;  
    font-size: 1.1em;  
    font-stylenormal;  
    }    

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?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Jul 2008, 11:30 AM
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
0
Mick
Top achievements
Rank 1
answered on 09 Jul 2008, 12:37 PM
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.
0
Dimo
Telerik team
answered on 09 Jul 2008, 01:22 PM
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
Tags
Calendar
Asked by
Mick
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mick
Top achievements
Rank 1
Share this question
or