RadDateTimePicker calendar shadow problem

[Gareth]

Hi there,

I am currently trying to figure out a problem with the display of the calendar in the ASP AJAX RadDateTimePicker control. It seems like the bottom shadow of the calendar is either offset or the calendar is a little too short and causes a gap between the calendar pane and the shadow.

Even after stripping away ALL possible conflicting CSS, the above image is still what we get. I am using a standard RadDateTimePicker control without any embellishments. Literally, just:

<telerik:RadDateTimePicker ID="myID" runat="server"></telerik:RadDateTimePicker>

Has anyone seen this issue before? 

Cheers

Gareth

 

[Rumen]

Hi Gareth,

It looks like the issue you're encountering might be due to custom CSS overriding or interfering with the default styling of the RadDateTimePicker. Even if you’ve stripped away what seems like all conflicting styles, keep in mind that global styles or inherited styles (like box-shadow, margin, or overflow) from parent containers can still affect rendering subtly.

Here are a couple of suggestions to try:

1. Inspect the DOM
   Use browser dev tools (F12) to inspect the exact element that renders the calendar popup. Check for any computed styles that might be altering its box-shadow, padding, or causing layout shifts.
2. Try RenderMode="Lightweight"
   The control is currently rendered in Classic mode by default, which uses tables and older markup. Try setting:

   <telerik:RadDateTimePicker ID="myID" runat="server" RenderMode="Lightweight" />

   The Lightweight mode uses more modern HTML and CSS, which can resolve some quirks related to layout and shadows, especially when dealing with newer CSS frameworks or resets.
3. Explicit Styling Reset (Optional)
   If switching render modes doesn't help, you can try adding this to your CSS as a quick test:

   .RadCalendarPopup {
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
       margin: 0 !important;
       padding: 0 !important;
   }

Let us know if changing the render mode helps—it often does the trick with these visual glitches.

Regards,
Rumen
Progress Telerik