Keep alert message always at the center

Question

Keep alert message always at the center

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

I'm looking for a way to keep a css alert message focused on all situations.

The situation is this:

I have two tables that have the option to be minimized, and at the end a submit button. By pressing the sumbit button if there is an error, a floating message appears (with the toastr library), which reports the error. The problem is that if I scroll, or minimize the tables, and the structure of the page changes me and pressing the submit, the error message does not necessarily remain at the center as defined, but above or below, since it does not maintain the same pixels or change the layout of the screen to say one way.

In what way could you always send the message to the center of the screen, regardless of the view you have?

The way to set the position that I currently have is:

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

the message

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

the css

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

I do not put all the code because it is long and what calls the message has no relevance to the style itself, but is more than anything because as the submit button is in the background, generates the message in the center of what you see, but if I minimize a table as in the second image, I still reach to press the button but it generates the alert in the same place as at the beginning and not in the new screen center.

In other words, always the message is located at the center of the screen that was generated in the recharge according to its measurements, if from there I see the top, or reduce elements, it does not fit the center of what I am seeing , but keeps sending the message to the center of the original size.

If I minimize or scrolling upwards, it stays that way

css

asked by user3674768 03.01.2019 в 15:36

source

2 answers

Send to different recipients Php Mailer Do not catch the ES6 Javascript effect

score 1 · Answer 1

Use percentages and then a translate to center it right in the center, you can also do it with flexbox. Regardless of the size of the window it will always be in the center as I show you in the example.

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>

score -1 · Answer 2

In the .toast-center class, try adding the attribute / deep /.

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

What exactly is the selector / deep / in CSS?

Greetings.