How do I style a notification's content differently on mobile versus desktop?

[Tyler]

I have a notification element that I want to position with some margin on the right side of the screen on desktop, so it doesn’t sit too close to the edge. Using .Position(p => p.Right(80)) achieves this, but on mobile, the notification overflows off the left side of the screen. Is there a way to conditionally apply the right positioning based on screen width?

Additionally, on mobile, I’d like to set the width to something like 80% of the screen and center the notification. On desktop, I want it to maintain its default width. Is this possible?

P.S. This is for Telerik ASPNet Core UI.

[Alexander]

Hi Tyler,

Generally, the Position.Right() API configuration will take into consideration the viewport's dimensions. However, in the case of a more variable scenario, a possible recommendation would be to explicitly wire to the window.resize event. And based on the an arbitrary criteria for the viewport's widths, alter the position of Notification via the .setOptions() method.

Here is an example:

<script>
	$(window).resize(function(e){
		width = e.target.outerWidth;
		height = e.target.outerHeight;
	
		if(width <= 900){
			var popupNotification = $("#popupNotification").data("kendoNotification");
	
			popupNotification.setOptions({
				position:{
					right: 200
				}
			})
	
		}
	})
</script>

However, at this stage there is not built-in functionality to handle this in a more declarative manner.

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Tyler]

Hey Alexander,

This is not what I am seeing on my own end. In chrome dev tools, if I debug any mobile screen size such as the iPhone 14 Pro Max setting, I see the notification overflowing off the left side of the screen. I never resized my window. My window is this width when I initially load the page.


Here is an example with the notification set to .Position(p => p.Right(40)). How do I prevent this overflow from happening? How do I get the notification to fit my window while still having a margin on the right side?

[Alexander]

Hi Tyler,

I tried further testing the reported behavior within a standalone application, however, here is what the application exhibited with an identical configuration as yours:

I have used the browser's mobile emulator to mimic an IOS device, but did not manage to replicate the same issue as you currently are exhibiting.

Attached is the sample where you can conduct some further experiments. My appeal here would be to try and replicate the behavior within the attached sample and send it back for further examination.

I look forward to hearing back from you.

[Tyler]

Have you tried it with a big piece of text that spans several lines?

[Alexander]

Hi Tyler,

Indeed, I have observed a slight overflow if a fairly large text were to be inducted within the Notification. However, I managed to rectify this behavior by setting the Position.Left() API configuration as well:

@(Html.Kendo().Notification()
        .Name("popupNotification")
        .Position(p => {
            p.Left(10);
            p.Right(40);
        })
)

As a consequence of these changes, here is the observed behavior on my front:

Attached is another revised version of the previous sample for you to examine further.

[Tyler]

But I want a margin right. What happened to the margin right?

[Alexander]

Hi Tyler,

If you wish to preserve the margin right in a more dynamic fashion, I would personally lean onto a more customary approach which tries to center the notification based on the arbitrary viewport dimensions. This way, you would still have the margins intact in conjunction with the text not being overlapped.

The following demo showcases such an approach which can be found here:

Notification Position and Stacking (Demo) - open the "View Source" tab to observe the Notification's configuration.

Namely, this can be achieved by:

• Subscribing to the Show event:
  

.Events(e => e.Show("onShow"))

• Within the Show handler, calculate the left and top dimension, depending on the window's viewport proportions:
  

<script type="text/javascript">

    $(document).ready(function () {
        var popupNotification = $("#popupNotification").data("kendoNotification");
    
        $("#showPopupNotification").click(function () {
            var d = new Date();
            popupNotification.show("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.", "error");
        });
    })

    function onShow(e) {
        if (e.sender.getNotifications().length == 1) {
            var element = e.element.parent().parent(),
                eWidth = element.width(),
                eHeight = element.height(),
                wWidth = $(window).width(),
                wHeight = $(window).height(),
                newTop, newLeft;

            newLeft = Math.floor(wWidth / 2 - eWidth / 2);
            newTop = Math.floor(wHeight / 2 - eHeight / 2);

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

I am risking sounding repetitious, but I am attaching yet another sample for you to examine further.