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

Popup align to the right side of input

4 Answers 145 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Marcin
Top achievements
Rank 1
Veteran
Marcin asked on 20 May 2014, 02:05 PM
Hello
I have some issues with popup display - it is partially hidden outside of browser (overflow: hidden) when picker is near right edge of site. I would like to set popup to display it to be aligned to right side of input instead of default left.

I would like to achieve similar popup behaviour like with RTL, but without RTL.

Regards
Marcin

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 22 May 2014, 08:44 AM
Hi Marcin,

You can tweak the DatePicker's popup position after initializing the widget like this:

var pickerDateViewPopup = $("#datepicker").data("kendoDatePicker").dateView.popup;
 
pickerDateViewPopup.options.origin = "bottom right";
 
pickerDateViewPopup.options.position = "top right";


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Augusto
Top achievements
Rank 2
answered on 10 Dec 2015, 03:23 PM
How can I accomplish this when using Angular? Thanks.
0
Dimo
Telerik team
answered on 10 Dec 2015, 04:19 PM
Hello Augusto,

Use the kendoWidgetCreated or kendoRendered event and obtain a reference to the DatePicker widget in the handler function. Once you have the DatePicker widget, get its dateView popup and proceed as shown above.

http://docs.telerik.com/kendo-ui/AngularJS/global-events

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Augusto
Top achievements
Rank 2
answered on 10 Dec 2015, 09:21 PM

            vm.instructionDatePicker = null;
            $scope.$on("kendoWidgetCreated", function (event, widget) {
                if (widget === vm.instructionDatePicker) {
                    widget.dateView.popup.options.origin = "bottom right";
                    widget.dateView.popup.options.position = "top right";
                }
            });

Thanks! Worked great!
Tags
Date/Time Pickers
Asked by
Marcin
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
Augusto
Top achievements
Rank 2
Share this question
or