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
Copy file name to clipboardExpand all lines: troubleshooting/general-issues.md
+7-5Lines changed: 7 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,19 +53,21 @@ app {
53
53
54
54
The position of popups (Window, various dropdowns such as DropDownList, ComboBox, DatePicker) can be wrong or offset.
55
55
56
-
The most common reason for such a problem is that the [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#project-configuration) does not match the `<body>` and the browser viewport - this is required because that component is the topmost element our components can access in order to render popups/dropdowns.
56
+
The most common reason for such a problem is that the [`<TelerikRootComponent>`]({%slug getting-started/what-you-need%}#project-configuration) does not match the `<body>` and the browser viewport - this is required because that component is the topmost element our components can access in order to render popups/dropdowns.
57
57
58
58
There are several common cases when such a mismatch occurs:
59
59
60
60
* The position and size of the `<app>` element (or however the root component of your Blazor app is called) does not match the `<body>`.
61
61
62
-
* There are CSS rules that offset the `<app>`element or its parent element (such as `position: absolute` or `margin: auto`, or placing it in some form of popup like a jQuery dialog).
62
+
* There is more than one `<TelerikRootComponent>`in the app (for example, a certain Razor Component has its own) - there should be only one instance in the main layout.
63
63
64
-
*There are CSS rules that alter the positioning of an element or class used in the Telerik popup elements.
64
+
* CSS related cases:
65
65
66
-
* There is more than one `<TelerikRootComponent>` in the app (for example, a certain Razor Component has its own) - there should be only one instance in the main layout.
66
+
* There are CSS rules that offset the `<app>` element or its parent element (such as `position: absolute` or `margin: auto`, or placing it in some form of popup like a jQuery dialog).
67
+
68
+
* The default `margin` of the `body` element (such as the one that Bootstrap brings in) is not removed. With this margin in play the `<body>` and the browser viewport do not match exactly and Telerik popups may be displaced with the value of the margin. The solution in this case is to remove it with a rule like `body { margin:0; }`, so the popups are placed correctly.
67
69
68
-
* The default `margin` of the `body` element is not removed with a rule like `body { margin:0; }` such as the one that Bootstrap brings in. With this margin in play the `<body>` and the browser viewport do not match exactly and Telerik popups may e displaced with the value of the margin.
70
+
* There are CSS rules that alter the positioning of an element or class used in the Telerik popup elements.
69
71
70
72
You can check the application for such issues and ensure that the `<app>` element size and position matches the `<body>` and the browser viewport, and that the `<TelerikRootComponent>` is a direct child of the `<app>` element and encompasses the `@Body` in the main layout.
0 commit comments