使底部表（弹出窗口）粘在按钮上（角材料）

Question

I have project in angular, i add bottom sheet from angular material and it work. i try to make the opened popup be sticky to botton and responsive to him But its not work.

my main components:

import { Component, OnInit } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { PopupsDialogComponent } from '../../../modules/home/components/popups-dialog/popups-dialog.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor(private _bottomSheet: MatBottomSheet) { }

  ngOnInit() {
  }
  openBottomSheet(): void {
    this._bottomSheet.open(PopupsDialogComponent, {
      panelClass: 'custom-popup'
    });
  }
}

main components html: This the button that i want the dialog be stiky to him

<header>
  <div class="container">
    <button mat-fab class="mat-success" (click)=openBottomSheet()>+</button>
  </div>
</header>

PopupsDialogComponents:

import { Component } from '@angular/core';
import {MatBottomSheetRef} from '@angular/material/bottom-sheet';
@Component({
  selector: 'app-popups-dialog',
  templateUrl: './popups-dialog.component.html',
  styleUrls: ['./popups-dialog.component.sass']
})
export class PopupsDialogComponent {

  constructor(private _bottomSheetRef: MatBottomSheetRef<PopupsDialogComponent>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }

}

style.css:

.custom-popup
    position: absolute
    top: 95px
    right: 26%
    min-width: 0% !important

thanks a lot

Answer 1

Some of built-in angular components are rendered lately, I think you can handle that in CSS like:

:host ::ng-deep .custom-popup {
    position: absolute
    top: 95px
    right: 26%
    min-width: 0% !important
}