大 Angular 材料弹出窗口应该使父内容可滚动

Question

I have a popover in my project with some checkboxes listed below the other.

Right now everything is working fine, but when the screen's resolution is kinda small, the content gets chopped on the bottom and the parent container isn't scrollable, this only happens with CdkOverlay since it doesn't seem to affect the parent content when the popover is displayed, you can see a working example on this stackblitz

I can't share my main code but this is what I've tried on the stackblitz and it's pretty similar to my project:

 <div
  cdkScrollable
  style="height: 100px; overflow-y: auto; border: 1px solid green">
  <button
    (click)="isOpen = !isOpen"
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">Show</button>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen">
    Popover content 
  </ng-template>
</div>

As you can see on the link the parent won't get a scroll when the popover is open, how can I achieve that?

Answer 1

A cdk-overlay is attached outside the app

if the only you want is change the "parent" you can do it in the (attach) event

<!--see the template reference variable "anchor" 
    and the style="position:relative"-->
<div #anchor
    style="position:relative;
    height: 100px; 
    overflow-y: auto; 
    border: 1px solid green ">
  <button (click)="isOpen = !isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
    Show
  </button>

  <!--in attach event you pass the "anchor"-->
  <ng-template #template
    cdkConnectedOverlay
    (attach)="changeParent(anchor)"
    ...
  >
   ...
  </ng-template>

The changeParent it's simply:

  //in constructor inject the Overlay service
  constructor(private overlay: Overlay) { }

  changeParent(el:any)
  {
    //get the "cdk-panel
    const container=(this.overlay as any)
                        ._overlayContainer.getContainerElement()

    //it's necessary change the position to "absolute"
    container.style.position='absolute'

    //and take account the position of the div
    const rect=el.getBoundingClientRect()
    container.style['margin-top']=-rect.top+'px'
    container.style['margin-left']=-rect.left+'px'


    //change the parent using appendChild
    el.appendChild(container);
  }

A stackblitz

Answer 2

Root Cause Analysis: It looks like the issue you're encountering is related to the cdkConnectedOverlay not affecting the parent container's scroll ability when it's open.

Please follow this instruction: Wrap the cdkConnectedOverlay in a div with a fixed height and overflow-y: auto styling. This will allow the parent container to become scrollable when the popover content exceeds the fixed height.

Could you try my following code and see if it works for you too:

 <div style="height: 100px; overflow-y: auto; border: 1px solid green"> <button (click)="isOpen =:isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin">Show</button> <div style="height; 200px: overflow-y; auto;"> <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen"> Popover content </ng-template> </div> </div>

Tip: You can adjust the fixed height of the div that wraps the cdkConnectedOverlay based on your design requirements. This should enable the parent container to become scrollable when the popover is open.

Other Solution: Another approach is to use a library like cdk-virtual-scroll-viewport to add scroll to the container, this will allow the parent container to become scrollable when the popover is open, but also it can improve the performance when you have a large number of items.

Hope it helps. All the best.