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

Datepicker Popup Position

7 Answers 391 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Albert Shenker asked on 29 Jan 2014, 06:21 PM
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.

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 30 Jan 2014, 06:13 AM
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.

0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 30 Jan 2014, 09:48 AM
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.  
0
Shinu
Top achievements
Rank 2
answered on 31 Jan 2014, 08:55 AM
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.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 13 Feb 2014, 02:42 PM
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.
0
Venelin
Telerik team
answered on 18 Feb 2014, 09:07 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 02 Oct 2015, 11:48 AM
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.
0
Venelin
Telerik team
answered on 06 Oct 2015, 05:59 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Calendar
Asked by
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Answers by
Shinu
Top achievements
Rank 2
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Venelin
Telerik team
Share this question
or