0
131
ViewsPosición del botón sensible a CSS
En este momento estoy tratando de hacer que mi modal responda, pero el botón "GUARDAR" no está posicionado como quiero. Quiero tener el botón en la misma posición todo el tiempo, pero ahora mismo está desapareciendo. Mi HTML y css tienen el siguiente aspecto
.delete{ font-size: 16px; max-width: 100%; max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; } .delete .text-div{ padding: 3px; } .delete .button-div{ display: inline-block; position: relative; padding: 3px; /* right: 50%;*/ left: 80%; } <div class="delete"> <div class="dialog-content-wrapper"> <mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center"> <span class="title dialog-title">Delete Entry</span> <button mat-icon-button (click)="onClose()" aria-label="Close dialog"> <mat-icon>close</mat-icon> </button> </mat-toolbar-row> </mat-toolbar> </div> <div class="text-div"> <span>Are you sure you want to delete this vacation entry?</span> </div> <div class="button-div"> <button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button> </div> </div> 
1 answers
Answer question0
En primer lugar, no necesita envolver elementos individuales en divs, no es una muy buena práctica con respecto a la accesibilidad.
Con respecto a su pregunta, ¿dónde quiere exactamente que esté su botón? Si su posición se establece en relative , se colocará en relación con el antepasado posicionado más cercano . Eso significa que debe colocar una propiedad de position en el div .delete (por lo general, relative será suficiente).
Otra forma de lograr lo que desea (si lo entiendo correctamente) sería agregar align-self: end al elemento del botón, ya que está envuelto dentro de un contenedor flexible.