How to Place a Button Halfway Out of an Angular 5 Material Dialog

Question

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image:

I attempted using absolute positioning to achieve this, but that solution is not ideal.

I want to position the button relative to the dialog itself. I also tried using float:right and negative margin-top, however, part of the button remains hidden even when setting z-index to over 1000.

<button mat-mini-fab style="cursor:pointer;position:absolute;top:420px;left:900px">
<i class="material-icons" (click)="close()">close</i>
</button>

https://i.sstatic.net/vH6cy.png (Source: codota.com).

css angular angular-material

Answer 1

Answer №1

Can you tell me where the button is located in the dialog HTML? Avoid using specific pixel values like 900px and 420px. Instead, use absolute positioning relative to the dialog container (the 'white' container) with top:0; right:0; and translate(50%,-50%).

This method should position the button exactly as desired. Take a look at the example below:

.dialog {
  position: relative;
  margin: 50px auto;
  width: 200px;
  background-color: black;
  height: 200px;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

<div class="dialog">
<button>X</button>
</div>

For further assistance, you can also check out this example on stackblitz -> dialog stackblitz. I have included a class ('my-dialog') in the dialog panel within the component file and added CSS styles in the global stylesheet since the dialog container/dialog panel cannot be accessed from the component directly.

Answer 2

Can you tell me where the button is located in the dialog HTML? Avoid using specific pixel values like 900px and 420px. Instead, use absolute positioning relative to the dialog container (the 'white' container) with top:0; right:0; and translate(50%,-50%).

This method should position the button exactly as desired. Take a look at the example below:

.dialog {
  position: relative;
  margin: 50px auto;
  width: 200px;
  background-color: black;
  height: 200px;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

<div class="dialog">
<button>X</button>
</div>

For further assistance, you can also check out this example on stackblitz -> dialog stackblitz. I have included a class ('my-dialog') in the dialog panel within the component file and added CSS styles in the global stylesheet since the dialog container/dialog panel cannot be accessed from the component directly.

Answer 3

Answer №2

To ensure the button closes the dialog, it should be positioned within the dialog itself:

<dialog-component>
   Content... content.. content...

   <button mat-mini-fab class="close-dialog-btn">
     <i class="material-icons" (click)="close()">close</i>
   </button>
</dialog-component>

If the dialog-component is styled with position: relative, absolute, or fixed, you can use this CSS to position the button:

.close-dialog-btn {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

The right/top values will place the button in the upper right corner, while transform will center it both vertically and horizontally.

Ensure there is no padding on the dialog element itself, as this may require adjusting the top/right values to accommodate any existing padding.

Answer 4

To ensure the button closes the dialog, it should be positioned within the dialog itself:

<dialog-component>
   Content... content.. content...

   <button mat-mini-fab class="close-dialog-btn">
     <i class="material-icons" (click)="close()">close</i>
   </button>
</dialog-component>

If the dialog-component is styled with position: relative, absolute, or fixed, you can use this CSS to position the button:

.close-dialog-btn {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

The right/top values will place the button in the upper right corner, while transform will center it both vertically and horizontally.

Ensure there is no padding on the dialog element itself, as this may require adjusting the top/right values to accommodate any existing padding.

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Answer №1

Answer №2

Similar questions

Encountering issues with Proxy functionality in the latest versions of Angular 13 and Spring Boot

How to perfectly align squares in CSS Grid

Issue with transition duration not affecting bootstrap button functionality

What is the best way to handle updating an npm package that is not the desired or correct version?

The Angular Router is continuing to show the HomeComponent upon navigation, rather than just displaying the ChildComponent

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

When the input type is set to 'number', FormGroup.valueChanges will only trigger on 'change' and 'blur' events

Arranging Divs into Two Columns in CSS - A Simple Guide

What is the process of integrating an API key into Apollo-Angular in order to retrieve information from the MongoDB Realm GraphQL API?

Switch out bootstrap icons for angular material icons

Having trouble getting your Raspberry Pi web server to display the background image?

Step-by-step guide on integrating a custom JS file into an Angular component

Image not found in PDF created from HTML to PDF conversion

Having difficulty resolving issues with the chat box (div) scroll bar staying fixed at the bottom

Ways to release the binding of an element and then re-enable it for future use

Issue encountered in cdk-virtual-scroll-viewport upon modifying the item array

Encountering problems during installation of packages in Angular

Using jQuery to iterate through an array and reverse its order

Struggling to make the right-side margin function correctly on a fixed navbar using a grid layout

Adding extra fields to an existing JSON response in a TypeScript REST API