1

I have an angular (15) material data table in which each row has a vertical menu icon in the first column opening a small context menu (mat-menu). The problem is that on mobile view after a certain row it starts to show up somewhere else (see gif). Example of the wrong behaviour

I have no idea what causes this. I've tried to reproduce it on StackBlitz with no luck. The best I could come up with is this gif. And also tried to remove everything (in my project) that's potentially could affect this behaviour (styles, scripts etc). I've also added only this component to the index.html file as

<body>
  <my-wrong-datatable-component></my-wrong-datatable-component>
</body>

Still no luck. I use the prebuilt deeppurple-amber theme which is correctly referenced in the angular.json file.

Has anyone every experienced something like this? How should I deal with this issue?

Update:

I think this issue is related to the PointerEvent.clientY giving wrong value. When I click on the same places as in the gif, it gives me values of 200, 700 and then 2700, etc. The screen is not even that big.

Mitulát báti
  • 2,086
  • 5
  • 23
  • 37
  • I was looking for a soluton of my problem with displaced menus in the newest Angular+Material version. I see a vertical displacement when just trying to implement the demo menus of the official angular material showcase page. Checked so far and happens in stackblitz: https://stackblitz.com/edit/sky-pfrec1s . I have opened a request on the stackblitz discord server, but got no response so far: https://discordapp.com/channels/364486390102097930/364486390102097932/1099704819356282930 I'm not sure if this is directly linked, I've got a vertical displacement, too, but immediately in the first menu – Michael S. May 07 '23 at 07:47

0 Answers0