angularangular-materialangular-cdk

CdkMenu submenus not aligned

I am working on a menubar using the @angular/cdk menu component.
You can find here a repro from stackblitz.

Currently the menubar works fine but there is a detail that is bothering me. Is it normal that the submenus are not aligned each other? Was it done on purpose? At each level the corresponding submenu seems to go down by one pixel.

enter image description here

Solution

  • You can use the below CSS to fix your issue. You can add this CSS to global-styles.scss.

    .cdk-overlay-container .cdk-overlay-connected-position-bounding-box {
  margin-top: -1px !important;
}

    Since the cdk is at the root component, this style will apply for all menus, I did not find a way to customize the class of the dropdown to scope the CSS. I hope that is fine.

    Stackblitz Demo