Angular 16 Material - cdk-overlay calculates wrong bottom position for mat-select-Items in...

I am using Angular Material (16.0.1) to design my Web-Application that runs in a browser. The project was initially created using angular-cli. Unfortunately I am having some problems, using the mat-select-component, which shows a huge gap between the actual select-component and the items to be displayed (this strange behavior occurs only in a mobile browser, the desktop version looks normal). The following pictures show both the actual and the expected outcome (I have manipulated the DOM in the picture showing the expected outcome, i. e. I changed the "bottom"-attribute in the "cdk-overlay-0"-div, see also the picture):

Actual

Expected

I have found the posts Angular Material2 md-select dropdown appears at bottom of the page in combination with Angular CDK's OverlayModule, cdk-overlay-pane will not set position to absolute?, indicating that there is something wrong with the configuration of my prebuilt themes. So I basically did the following:

• Checked my styles (in angular.json), which contains the entries @angular/material/prebuilt-themes/indigo-pink.css and src/styles.css and also
• Imported the theme in my styles.css file using @import as described in the first link from above

These changes, however, did not have any effect. Does anyone know of additional configuration that has to be done? When you look at https://material.angular.io/components/select/overview, the overlay is calculated in the correct way, so it is very likely that there is still something wrong with my configuration. I would be thankful if someone could point me in the right direction.

EDIT (17.06.2023): I narrowed down the error and realized it is related to the use of a dynamically generated table (mat-table). If we reach a certain number of columns in that table (I would say at around 15), we have the gap between dropdown-components and their displayed items, which are positioned below the table (as can be seen in the 'Actual'-Picture). Keep in mind: this behavior only occurs in mobile browsers. For this reason I'll try to set up an angular-material-project with a material-table and a mat-select below it, so we can hopefully replicate this bug.

EDIT (19.06.2023): I have created a minimum working example, with which you can replicate this bug. It can be found here. You will have to download the code, run ng serve and you should be able to call the application (localhost:4200). Like I said before, it is important to run the app in a mobile browser or use the device toolbar in Google Chrome or MS Edge. As a result you will see the gap (from my first picture). The bug depends on the number of columns to be displayed. You can change the cols in line 46 / 47 in the table.component.ts. If line 46 is active, the number of cols exceeds the page size, which produces a gap since the overlay is somehow not calculated in the correct way. If we comment out line 46 and comment in line 47, the gap disappears.

This brings me to the actual question: Now that we have a minimum working example, can we manage to position the displayed items of the dropdown correctly, even if we have a large number of columns?

Continue reading...