Centered Notification no longer working

[Michael]

Using the 2023.1.425 build of the UI for ASP.NET MVC suite the Notification component is no longer centering as it used to.  Even the demo page for the component on which our code is patterned to do the centering is not working - the notification still shows in the lower right corner when clicking the "Show Centered Notification" button.  Is this a bug that can be fixed or does the example code need to be updated?

[Michael]

 

It appears that the notification element now has an additional wrapper element so in order to center the notification you have to add a second call to the parent elements parent - I was able to get this work when running locally without any other changes to the demo code for centering:

e.element.parent().parent().css({ top: newTop, left: newLeft });

UPDATE - it appears my deploy bundle minified js file was not being updated properly so it was retaining the old code so the update I made to add the second parent call to do the centering does indeed work.  I tried this using the Kendo UI for jQuery dojo item for the .show event on the Telerik site and adding the second ".parent()." to the call to set the css attributes worked as well so I think this is a viable solution (unless Telerik says differently or shows a different method).

 

[Anton Mironov]

Hi Michael,

Thank you for the details provided.

Could you please confirm if the issue persists? If yes - please send me a runnable example(dojo sounds perfect) and I will try my best to resolve it.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov

[Michael]

Anton,

There is no need for me to send you a dojo - you need only look at your own demo page to see it is broken in whatever build is driving the UI for ASP.NET MVC demo pages - just click the "show centered notification" and you'll see it is not centered.   My workaround is indeed working but that doesn't mean it is the best/proper way to have gone about fixing the issue.

https://demos.telerik.com/aspnet-mvc/notification/position-stacking

Regards,

Michael Jensen

[Anton Mironov]

Hi Michael,

Yes, you are totally correct! I can see the described behavior represented in the demo.

This one looks like a bug. I will make further investigation and will come back to you in this thread with my findings.


Best Regards,
Anton Mironov

[Anton Mironov]

Hi Michael,

You are totally correct! It seems that we have a bug in the demo.

The following row:

e.element.parent().css({ top: newTop, left: newLeft });

should be:

e.element.closest(".k-animation-container").css({ top: newTop, left: newLeft });

Here is a dojo example:

• https://dojo.telerik.com/@anton.mironov/onujorEC

Thank you for pointing this one to our attention!


Kind Regards,
Anton Mironov

 

 

[Michael]

Anton,

Thanks for providing the "official" new solution to the issue.  I have verified it works and appreciate the effort to identify the proper paradigm for centering the notification. Please consider this official acceptance that the matter is resolved.

Kind Regards,

Michael Jensen