Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfortunately, my attempts were unsuccessful.
The main components of my project are as follows:
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 component HTML structure:
<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
Any assistance or insights would be greatly appreciated. Thank you!