You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: How to position the notifications more precisely
2
+
title: Custom or Centered Notification Position
3
+
description: How to position the notifications more precisely at a specific custom location? How to center notifications on the screen?
4
4
type: how-to
5
-
page_title: Custom Notification Position
5
+
page_title: Custom or Centered Notification Position
6
6
slug: notification-kb-custom-position
7
7
position:
8
-
tags:
9
-
ticketid: 1504012
8
+
tags: notification, center, centre, custom, position
9
+
ticketid: 1504012, 1526682
10
10
res_type: kb
11
11
---
12
12
@@ -20,14 +20,28 @@ res_type: kb
20
20
</tbody>
21
21
</table>
22
22
23
-
24
23
## Description
25
-
I have a top-menu and would like to be able to adjust the notification so it is displayed below the menu, like setting margin-top to -18px.
26
24
27
-
I want to customize the position of the notification to be different from the default options that are relative to the viewport. I want the notifications in an area of the page I choose.
25
+
I want to customize the position of the notification to be different from the default options that are relative to the viewport boundaries. I want the notifications in a page area I choose.
26
+
27
+
I'd like to vertically center the notifications and display them at the center of the screen.
28
+
29
+
I would like to adjust the notification, so it is displayed below the top menu.
28
30
29
31
## Solution
30
-
You can wrap the notification in an element from your app (such as a `<div>`) and, through the `Class` the notification exposes, you can define CSS rules that put the notifications in that container so they respect its own offsets and position in your layout.
32
+
33
+
To display notifications at a custom position, follow these steps. The examples below demonstrate them in action.
34
+
35
+
* Place the `TelerikNotification` component in two nested `<div>` elements.
36
+
* The outer `<div>` should have a `position:relative` style.
37
+
* The inner `<div>` should have a `position:absolute` style.
38
+
* The **absolute** positioning ensures that the notifications don't push other content on the page. In some cases the outer `<div>` may not be needed.
39
+
* Adjust the position of one or both `<div>`s. The exact approach and CSS styles will depend on the specific case.
40
+
* Set a `Class` to the `TelerikNotification` component, which applies `position:relative` and `flex-wrap: nowrap !important` CSS styles.
41
+
42
+
### Custom Notifications near the center-top of the page
43
+
44
+
Here is where the notifications will appear if the outer relative `<div>` is placed right below the top bar of a Blazor app.
31
45
32
46
33
47
@@ -42,17 +56,16 @@ You can wrap the notification in an element from your app (such as a `<div>`) an
42
56
left: 50%;
43
57
top: 50%;
44
58
transform: translate(-50%, -50%);
45
-
z-index: 1234;
46
-
/* you may also want to set z-index or other rules here depending on your needs
47
-
This example centers the notification container according to its own parent which is
48
-
between the button and the tile layout in this snippet
49
-
Centering approach taken from https://css-tricks.com/centering-css-complete-guide/
59
+
z-index: 1234; /* depends on other z-indexes on the page */
60
+
/* This example centers the notification container according to its own parent which is
61
+
below the button.
62
+
Centering approach based on https://css-tricks.com/centering-css-complete-guide/
50
63
*/
51
64
}
52
65
53
66
.custom-positioned-notifications {
54
-
position: relative; /*make the container for the individual notifications respect the position of its parent*/
55
-
flex-wrap: nowrap !important; /*override the default setting from the component - this lets the individual notifications stay in a column instead of breaking out into two columns*/
67
+
position: relative; /* force the individual notifications respect the position of their parent*/
68
+
flex-wrap: nowrap !important; /* display the individual notifications in a single column */
56
69
}
57
70
</style>
58
71
@@ -68,26 +81,7 @@ You can wrap the notification in an element from your app (such as a `<div>`) an
68
81
</div>
69
82
</div>
70
83
71
-
<TelerikTileLayout Columns="3"
72
-
ColumnWidth="200px"
73
-
RowHeight="150px"
74
-
Resizable="true"
75
-
Reorderable="true">
76
-
<TileLayoutItems>
77
-
<TileLayoutItem HeaderText="Panel 1">
78
-
<Content>Regular sized first panel.</Content>
79
-
</TileLayoutItem>
80
-
<TileLayoutItem HeaderText="Panel 2">
81
-
<Content>You can put components in the tiles too.</Content>
<Content>This tile is two rows tall and two columns wide</Content>
88
-
</TileLayoutItem>
89
-
</TileLayoutItems>
90
-
</TelerikTileLayout>
84
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia suscipit velit, ut lobortis lorem egestas a. Mauris lobortis imperdiet lacus, quis dictum lacus. Integer suscipit ultrices velit nec malesuada. Vestibulum sodales tellus in nibh feugiat maximus non a augue. Nunc eu nisl arcu. Donec vitae justo felis. Maecenas condimentum, risus quis vehicula cursus, elit nisi posuere dui, eget feugiat sapien lacus in leo. Morbi molestie et velit at egestas.</p>
@@ -105,9 +99,58 @@ You can wrap the notification in an element from your app (such as a `<div>`) an
105
99
}
106
100
````
107
101
102
+
### Center Notifications Vertically and Horizontally on the Screen
103
+
104
+
In this case, the `TelerikNotification` is wrapped in a single `<div>` with a `position:fixed` style. This will center the notifications on the screen, no matter the page scroll offset.
105
+
106
+
````CSHTML
107
+
<style>
108
+
.centered-notification-parent {
109
+
/* center this element on the screen, no matter the page scroll offset */
110
+
position: fixed;
111
+
left: 50%;
112
+
top: 50%;
113
+
transform: translate(-50%, -50%);
114
+
z-index: 1234; /* depends on other z-indexes on the page */
115
+
}
116
+
117
+
.custom-positioned-notifications {
118
+
position: relative; /* force the individual notifications respect the position of their parent */
119
+
flex-wrap: nowrap !important; /* display the individual notifications in a single column */
120
+
}
121
+
</style>
122
+
123
+
<TelerikButton OnClick="@AddNotification">Display a vertically centered notification</TelerikButton>
* Keep in mind that the container for the notifications might consume mouse clicks, selection or otherwise interfere with the UX of your app. Thus, style and size it accordingly.
110
153
111
154
* You can inspect the rendered content to see what the built-in CSS rules and HTML structure are, so you can tweak this example further to fit your needs.
0 commit comments