Datepicker Popup Render Issue

[Mick]

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-size: 13px;
	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-align: left;
	}
	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-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	}

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?

[Dimo]

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

[Mick]

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-size: 13px;
    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-align: left;
    }
.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-weight: bold;
    font-size: 1.1em;
    font-style: normal;
    }

However this has no effect to the popups at all.

Any help you could give would be great.

[Dimo]

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