Duplicated
Last Updated: 04 Apr 2022 06:13 by ADMIN
Mauro
Created on: 28 Mar 2022 07:03
Category: ColorPicker
Type: Bug Report
0
Kendo colorpicker popover does not reposition or respect viewport size

The colorpicker is configured with positionMode  'absolute'  forcing body to resize instead of repositioning the popup if it would go off screen.

https://stackblitz.com/edit/angular-itnxyg?file=app/app.component.ts

        this.popupRef = this.popupService.open({
            anchor: this.activeColor,
            animate: this.popupSettings.animate,
            appendTo: this.popupSettings.appendTo,
            popupAlign: popupPosition,
            anchorAlign: anchorPosition,
            popupClass: 'k-colorpicker-popup',
            content: this.popupTemplate,
            positionMode: 'absolute'
        });

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Martin
Posted on: 04 Apr 2022 06:13

Hi Mauro,

Thank you for the provided feedback.

Internally the ColorPicker utilizes the Popup component for displaying the gradient. It looks like the popup always tries to open on the right side of the anchor, without considering the space on the left. 

Indeed this behavior seems related to the bug reproduced in the Menu component, where the Popup behaves the same - it is always opened on the right:

https://github.com/telerik/kendo-angular/issues/3592

I update the discussion by adding details for this scenario as well.

As a workaround, the developer can try downgrading the version of the Popup to v4.0.2:

https://stackblitz.com/edit/angular-itnxyg-aq3ksg

I would suggest subscribing to the issue, in order to be notified in a timely manner when there is any update. As a small token of gratitude for reporting this, I updated your Telerik points.

Please accept our apologies for the caused inconvenience until the issue is resolved.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.