Misaligned popup when scrolling the body in Mozilla and Edge

[svetq]

I'm submitting a...

• Bug report

Current behavior

The dropdown multiselect is misaligned when scrolling the body on Mozilla and Edge.

Minimal reproduction of the problem with instructions

Sample plunker:

http://plnkr.co/edit/sQm4ddYzqlJhURXoVeGi?p=preview

[ggkrustev]

We've pushed a fix to the relevant package that caused the issue. Please reinstall @progress/kendo-popup-common in order to fetch the latest version.

rm -rf node_modules/@progress/kendo-popup-common && npm i

NPM should install @progress/kendo-popup-common@1.2.1 package.

[jaandric]

It works nice. Good job.
Tested for DropDownList and Multiselect on Chrome (61.0.3163.100), Firefox (56.0), Edge (40.15063.0.0)

[ggkrustev]

@jaandric, thanks for testing and for sharing the results!

We found one issue when the popup doesn't have an offset parent, applicable only when popup is used as a standalone component. The issue is addressed in @progress/kendo-popup-common@1.2.2

I will close the issue as resolved. Please comment if anyone still observes the issue with the latest packages.

[Huck]

We are still having serious issues with the kendo angular2 DropDownList. the 1.2.2 did fix some of the popup placement errors, but we keep having more issues.

The app is too complex for posting a demo in plunker, but basically its a big angular2 component page with a form split in a ton of bootstrap panels:

<form [formGroup]="someForm" novalidate>
<div class="panel panel-default">
<div class="panel-heading">Investor Summary</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="center-block">
Field:
some input or dropdown
</label>
[more fields...]
</div>
</div>
</div>
</div>
</div>
</form>

The problems we are facing are: somewhat starting into the second panel and lower, any dropdown has some or all of the below issues:

1. popup appears way higher in the page (making it invisible unless you scroll much higher). makes it look like no popup appears and users are very unhappy about this.
2. popup opens and we can select values with the keyboard up and down keys, but mouse clicks do nothing.

These issues are seriously blocking, prompting us to wonder if kendo angular is really ready for production use?

N.B.: we are multi license paying customers.

thanks

[ggkrustev]

Hi @Huck, I am really sorry to hear about the issues you've been struggling with.

Although simple, Popup component needs to handle numerous layout scenarios and work seamlessly in quite versatile environment (transformed parents, different displays, positions and etc). I do believe that the Popup is production ready, as it has been used in many different scenarios and it works seamlessly (we've been tackling different issues for almost an year already).

Of course, there could be unsupported cases/bugs, which could be resolved much faster if a repro demo is provided (it doesn't need to be plunker). Please open a support ticket in our ticketing system sharing a runnable repro demo and referencing this Github issue. The posted details will be completely private, allowing you to share a more sensitive data if needed. This will help us immensely to narrow down the cause of the issue much faster and to provide a feasible solution promptly.
Let me know if you want to proceed with the investigation in different way.

[Huck]

ok, I updated every single kendo package to the absolute latest version and ran an npm update. now the controls are working as expected. Probably was a version mismatch preventing the latest fixes to make it through. works perfectly now.

thanks

[ggkrustev]

Glad to hear that everything is OK now!

[tyhink]

I've updated all kendo packages to the absolute latest versions and I'm still struggling with the popup showing way below the dropdown. I can hack it with some css, but I can't find a workaround for the dropdowns in table filters