1

I am building a fast text functionality in an Angular app with Angular Material. On click of a form field a material dialog would pop up, containing a list of abbreviations and on select would populate the form field.

I've got pretty much everything covered just can't make the dialog follow it's corresponding input field on scroll.

This is the function in a service that opens the dialog. I am passing the data that needs to be displayed in the dialog and the coordinates of the click. The problem is that the dialog takes the coordinates relative to the viewport.

fastTextDialog(
    data: any, coordinates: any
  ): Promise<DialogResult> {
    return new Promise((resolve, reject) => {

      const styles = {
        maxHeight: '250px',
        minWidth: "100px",
        panelClass: 'my-dialog',
        position: {
          left: `${coordinates.positionX}px`,
          top: `${coordinates.positionY}px`
        },
        disableClose: true,
        hasBackdrop: false
      };

      let dialogData = data
      const dialogReference = this.dialog.open(FasttextDialogComponent, {
        ...styles,
        data: dialogData
      });

      dialogReference.afterClosed().subscribe((dialogResult: DialogResult) => {
        resolve(dialogResult);
      });
    });
  }

How can I make the dialog move with the scroll?

Is there a different component that would fit better for this functionality?

This is how the DOM looks like. Is it even possible to achieve what I want with the mat-dialog?

This is how the DOM looks

Morrison7252
  • 11
  • 3
  • Scrolling behavior is determined by `scrollStrategy` option that comes from CDK Overlay package https://material.angular.io/cdk/overlay/api#RepositionScrollStrategy (MatDialog actually is Overlay). Possibly, `MatDialog` - intended to be modal - is not what you need. May be `MatMenu` or your own `Overlay` type suits better. – Edmunds Folkmanis Feb 21 '23 at 11:51
  • I think building a custom Overlay is the thing to do here. Thanks @EdmundsFolkmanis – Morrison7252 Feb 21 '23 at 15:13

1 Answers1

0

You can do that with CSS. You already defined panelClass: 'my-dialog', in your settings. You're left to define the css for it.

.my-dialog
{
   position: fixed;
}
Playdome.io
  • 3,137
  • 2
  • 17
  • 34