Datepicker Popup Position

[Albert Shenker]

When I place a datepicker in a dialog, sometimes I notice that the popup gets cut off if there isn't enough room above or below the datepicker. In all cases, I have enough room for the popoup within the dialog, just not enough room for the entire popup above or below the picker. It would be nice if the picker could detect the container boundaries and appear in a satisfactory location. Alternatively, if you could provide a PopupDirection of "Right" (and Left) so the popup will display vertically centered to the right of the picker icon, that would also help.

[Shinu]

Hi Albert Shenker,

Please try to set PopupDirection property of RadDatePicker to position the Popup. Please have a look into this online demo.

Thanks,
Shinu.

[Albert Shenker]

I am well aware of the popup direction property. What I was getting at in my post is that the top right or bottomright setting places the entire pop up above or below the datepicker. Sometimes there is not enough room to display the popup entirely above or below the datepicker. It would be nice if there were pop up directions that would display it to the right or left so that half of the popup was above the picker and half below. Alternatively it would be great if the popup had container boundary detection capabilities like some of your other controls.  

[Shinu]

Hi Albert Shenker,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" EnableScreenBoundaryDetection="false"
    PopupDirection="BottomLeft">
</telerik:RadDatePicker>

CSS:

<style type="text/css">
    .RadCalendar
    {
        margin-top: -70px !important;
    }
</style>

Let me know if you have any concern.
Thanks,
Shinu.

[Albert Shenker]

The hack didn't work for me (see attached). Maybe its because I'm using a shared Calendar for my datepickers. Anyhow, it would be nice if you implemented some container detection like you have in your other controls.

[Venelin]

Hello Albert,

"It would be nice if the picker could detect the container boundaries and appear in a satisfactory location."
I understand, but how do you define "satisfactory location"? If we leave the control to decide where to popup this could lead to unexpected/undesired behavior. So I would advice to manually adjust the popup position with respect to your specific case. Use the .RadCalendaPopup instead

CSS:

.RadCalendarPopup  {
    margin-top: ...px;
    margin-left: ...px;
}

Please also refer to the set_popupDirection and this online demo.

Regards,
Venelin
Telerik

[Albert Shenker]

Again, I am using a Shared radCalendar per Teleirk's preferred methodology. This issue won't affect every datepicker on a dialog.. only certain ones which don't have enough room above or below to display the popup. I think my suggestion of providing Right and Left Popup directions would solve this issue to a great degree. And such a feature shouldn't be too hard to implement since you already have other popup directions and its only a matter of changing the x, y calculation a bit to have it appear to the direct right or direct left of the datepicker.

[Venelin]

Hello Albert,

I'll forward your idea to the rest of the team so it can be considered for development. I would like to also note that in such cases it's best to log your item in the feedback portal so it can be documented and trackable by us and by you.

Regards,
Venelin
Telerik