1

Estoy buscando la manera de mantener un mensaje de alerta en css centrado en todas las situaciones.

La situacion es esta:

Tengo dos tablas que tienen la opcion de minimizarse, y al final un boton de submit. Al presionar el boton de sumbit si hay un error aparece un mensaje flotante (con la libreria toastr), que avisa el error. El problema es que si yo hago un scroll, o minimizo las tablas, ya la estructura de la pagina me cambia y al presionar el submit, el mensaje de error no necesariamente queda al centro como se definio, sino que mas arriba o mas abajo, ya que no mantiene los mismos pixeles o cambio la disposicion de la pantalla por decir de un modo.

¿De que manera podria lanzar siempre el mensaje al centro de la pantalla, independiente de la vista que se tenga?

La manera de setear la posicion que tengo actualmente es:

toastr.options.positionClass = 'toast-center';

el mensaje

toastr.warning('No existen Tramites al cual asociar.');

el css

.toast-center {
top: 500px;
margin: 0 auto;
left: 35%;
}

No pongo todo el codigo por q es largo y lo que llama al mensaje no tiene relevancia con el estilo en si, sino que es mas que nada por que como el boton submit esta al fondo, genera el mensaje en el centro de lo que ve, pero si minimizo una tabla como en la segunda imagen, igual alcanzo a presionar el boton pero me genera la alerta en el mismo sitio que al inicio y no en el nuevo centro de pantalla.

En otras palabras, siempre el mensaje se situal al centro de la pantalla que se genero en la recarga acorde a sus medidas, si de ahi veo la parte superior, o reduzco elementos, no se ajusta al centro de lo que estoy viendo, sino que sigue mandando el mensaje al centro del tamaño original.

introducir la descripción de la imagen aquí

Si minimizo o scrolleo hacia arriba queda asi

introducir la descripción de la imagen aquí

2
  • Es mucho más fácil ayudar si vemos código para reproducir el problema y entender lo que ocurre.
    – Shaz
    Commented el 3 ene. 2019 a las 14:36
  • Ahi agrege parte de codigo e imagenes. Commented el 3 ene. 2019 a las 14:48

2 respuestas 2

1

Utiliza porcentajes y despues un translate para centrarlo justo en el centro, tambien lo puedes hacer con flexbox. Sin importar el tamaño de la ventana siempre estará en el centro tal como te muestro en el ejemplo.

div:nth-child(1) {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /*No es necesario*/
 background: #ef4c4c;
 padding: 15px;
 color: #fff;
}
div:nth-child(1):hover{
 opacity: 0;
}

div:nth-child(2) {
  height: 100vh;
  background: yellow;
  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}
<div>Div centrado con translate</div>
<div><span>Div centrado con Flex</span></div>

1
  • Gracias qwerty!, algo asi es lo que necesito, probare con esa idea a ver si puedo adaptarla :) Commented el 3 ene. 2019 a las 18:11
-1

En la clase .toast-center, prueba a añadir el atributo /deep/.

/deep/.toast-center {
  top: 500px;
  position: fixed !important;
  margin: 0 auto;
  left: 35%;
 }

¿Qué es exactamente el selector /deep/ en CSS?

Un saludo.

9
  • 1
    Muchas gracias Jairo, lamentablemente no me funciono, pues toma como referencia el largo de la pagina, pero no de lo que se esta viendo realmente, y ahi radica el problema, puesto que no siempre estoy viendo el centro, muchas veces estoy viendo la parte superior de la pagina pero el mensaje se sigue creando en el centro de ella :/. Commented el 3 ene. 2019 a las 15:24
  • Has probado a implementar a implementar position: fixed !important o /deep/.toast-center { top: 500px; margin: 0 auto; left: 35%; position:fixed; } , puede que la libreria te este añadiendo otra posición internamente. Commented el 3 ene. 2019 a las 15:36
  • Si, intente colocar el position: fxed al final tal como lo hiciste pero me sigue dejando el mensaje en el centro, no se adapta a el centro de lo que estoy visualizando. No se si exista alguna funcion para eso. Commented el 3 ene. 2019 a las 15:56
  • He editado la respuesta para que quede algo más claro. La posición donde tu coloques el position: fixed no es relevante. Commented el 3 ene. 2019 a las 16:06
  • Claro, yo lo puse al final, pero se sigue adaptando a la pantalla, lo que es logico, pero no contempla si uno ve otra seccion de la pagina. Quizas exista alguna forma de que contemple la visualizacion y no la posicion neta de la pagina. Commented el 3 ene. 2019 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.