Dropdown Alignment Issues After Upgrading from Angular 12 to Angular 15

Question

I recently upgraded my web application from Angular 12 to Angular 15. Since the upgrade, I've encountered issues with the alignment of all dropdowns—they are no longer positioned correctly.

Here are the specifics:

• Previous Angular Version: 12
• Current Angular Version: 15
• Previous CDK Version: "@angular/cdk": "^12.0.0"
• Current CDK Version: "@angular/cdk": "^15.2.9" For better understanding, I have attached two images:

---

• Before Upgrade: Image showing correct alignment
• After Upgrade: Image showing misaligned dropdowns

---

Has anyone faced similar issues after upgrading Angular and the CDK? What steps can I take to resolve this alignment problem?

Thank you in advance for your help!

• Reviewing Breaking Changes: I went through the Angular and CDK release notes for any breaking changes that might affect dropdown alignment but couldn't find anything specific to this issue.

• CSS Adjustments: I attempted to manually adjust the CSS of the dropdowns, but this only provided temporary fixes and did not resolve the root cause.

---

Expected Outcome: I was expecting the dropdowns to maintain their previous alignment and positioning after the upgrade. Specifically, I anticipated that the upgrade process would be smooth without affecting the layout of existing components.