Changing Notification size isn't working?

1 Answer 2 Views

Notification

Rob asked on 20 May 2025, 03:41 PM

TelerikNotificationIssue1.jpg

In my _Host.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <component type="typeof(ApplicationInsightsInit)" render-mode="ServerPrerendered" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?@telerikUiForBlazorVersion" rel="stylesheet" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" rel="stylesheet" />
    <link href="lib/fontawesome/css/all.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" />

In my Site.css

.TelerikNotification .k-notification-container .k-notification {
    width: 300px;
    height: 50px;
    font-size: 1.5em;
    text-align: center;
}

.wide-notification-center .k-notification {
    width: 750px;
    height: 70px;
    font-size: 1.5em;
    text-align: center;
}

Blazor Page

<TelerikNotification @ref="@NotificationRefWide" Class="wide-notification-center" HorizontalPosition="@NotificationHorizontalPosition.Center" AnimationDuration="3000"></TelerikNotification>

C# page code (server side)

public TelerikNotification NotificationRefWide { get; set; }



                    NotificationRefWide.Show(new NotificationModel()
                    {
                        Text = "Warning: " + message,
                        ThemeColor = ThemeConstants.Notification.ThemeColor.Warning,
                        Closable = true,
                        CloseAfter = duration,
                        Icon = FontIcon.WarningTriangle,
                        ShowIcon = true
                    });

Any changes I make in the Site.css have ZERO impact on the display of the notification (see attached image). In fact, I can remove the class definitions from CSS and still get the same results. It's as if Telerik Notification is completely ignoring the class reference?

Any suggestions?

Rob.

Rob

commented on 20 May 2025, 04:04 PM

UPDATE: If I move the style

.wide-notification-center .k-notification {
    width: 750px;
    height: 70px;
    font-size: 1.5em;
    text-align: center;
}

to the Blazor Page

<style>
    .disabled-row {
    pointer-events: none;
    color: gray;
    }

    .disabled-row button {
    opacity: 0.6;
    }

    .bookingCellFormat {
    color: blue;
    }

    .warningText {
    color: red;
    }

    .wide-notification-center .k-notification {
        width: 750px;
        height: 70px;
        font-size: 1.5em;
        text-align: center;
    }
</style>

It works as expected.

The issue seems to be that the Sites.css is being ignored? I don't understand why? It's referenced in my _Host.cshtml file. On a side note, I am using TailwindCss but that generates the styles.css completely separate. Unless, there is some sort of incompatibility between TailwindCSS and Telerik?

Thoughts?

Changing Notification size isn't working?

1 Answer, 1 is accepted