Popup align to the right side of input

5 posts, 1 answers
  1. Marcin
    Marcin avatar
    165 posts
    Member since:
    Jan 2011

    Posted 20 May 2014 Link to this post

    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 10 Dec 2015 Link to this post

    How can I accomplish this when using Angular? Thanks.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Dec 2015 Link to this post

    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!
  6. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 10 Dec 2015 in reply to Dimo Link to this post

                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!
Back to Top
Kendo UI is VS 2017 Ready