I'm struggling with positioning my close icon button at the top right corner of my dialog box.
Here is my app-iconbutton component:
<button
mat-icon-button
class="iconbutton"
[ngStyle]="{
'background-color': backcolor
}"
(click)="onClick()"
>
<mat-icon [ngStyle]="{ 'color': iconcolor }">{{ icontype }}</mat-icon>
</button>
And here is my dialog box component structure:
<div>
<app-iconbutton
backcolor="white"
iconcolor="darkblue"
icontype="close"
class="closeicon"
></app-iconbutton>
</div>
<div class="dialogbox">
<h1 mat-dialog-title class="title">{{ title }}</h1>
<div mat-dialog-content>
<p class="content">{{ content }}</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button (click)="onYesClick()" cdkFocusInitial>
{{ confirmtext }}
</button>
</div>
</div>
I've attempted to align the close icon using CSS, but it's not aligning as desired. When I use float: right, it aligns itself with the title instead of being in the top right corner. And when I use position: absolute, the icon button appears outside the dialog box rather than staying relative to the screen. Can anyone provide guidance on how to resolve this CSS issue? This is my first experience with Angular and I am still learning...