mat-select面板在升级到Angular Material 15后仍然像版本14及以下一样重叠显示。

huangapple go评论59阅读模式
英文:

mat-select panel still shows overlapped like version 14 and below even after upgrade to angular material 15

问题

我们在项目中使用了 mat-select,但面板显示在触发文本上,就像版本 14 及之前的版本一样(我们的项目中使用的是 material 版本 12)。

在寻找了一些小技巧后,面板显示在触发文本下方,但在不同屏幕大小下不一致,特别是在移动视图中。

我们发现从 material 版本 15 开始,选择面板会显示在触发文本下方。

因此,我们升级到 material 版本 15,同时升级了 Angular 版本到 15。但是即使升级后,mat-select 仍然以之前的样式显示。

有人能否提供一些建议,指出可能出了什么问题,以及如何使 mat-select 的工作方式与 material 版本 15 的 mat-select 相同。

英文:

we have used mat-select in our project, the panel shows overlapping on the trigger text like version 14 and before (material version 12 was used in our project)

mat-select面板在升级到Angular Material 15后仍然像版本14及以下一样重叠显示。

after finding few hacks, the panel showed below the trigger text, but it was not consistent with different screen sizes, specially the mobile view.

We found that from material version 15, the select panel showed below the trigger text - mat-select面板在升级到Angular Material 15后仍然像版本14及以下一样重叠显示。

so we upgraded to material version 15, and also upgraded the angular version to 15. But even after the upgrade the mat-select is still showing in the previous style.

Can someone please suggest what could be going wrong here and what needs to be done to get working like material version 15 mat-select

答案1

得分: 0

根据评论,您只更新到了 Angular Material 15,但仍在使用传统模式运行。

要完全迁移,您需要运行以下命令:

schematic: ng generate @angular/material:mdc-migration

但是,由于类名更改为 mdc 前缀等以及一些组件的结构更改,您应该遵循它们的迁移指南。

https://rc.material.angular.io/guide/mdc-migration

英文:

Based on the comments, you have only updated to Angular material 15, but is running in legacy mode.

To fully migrate you need to run.

schematic: ng generate @angular/material:mdc-migration

however due to class name changes to the mdc- prefix etc and structual changes in some of the componets. you should follow their migration guide.

https://rc.material.angular.io/guide/mdc-migration

huangapple
  • 本文由 发表于 2023年6月2日 12:20:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76387085.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定