docs(common): wrong popup position - special troubleshooting section

marin-bratanov · marin-bratanov · commit a72fbc1908ab · 2020-05-19T12:15:44.000+03:00
diff --git a/troubleshooting/general-issues.md b/troubleshooting/general-issues.md
@@ -12,6 +12,9 @@ position: 1
 
 This page provides solutions for common issues you may encounter while working with Telerik UI for Blazor components.
 
+* [Popups Do Not Work](#popups-do-not-work)
+* [Wrong Popup Position](#wrong-popup-position)
+
 ## Popups Do Not Work
 
 There are three common reasons for this
@@ -38,6 +41,24 @@ app {
 ````
 
 
+## Wrong Popup Position
+
+The position of popups (Window, various dropdowns such as DropDownList, ComboBox, DatePicker) can be wrong or offset.
+
+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. 
+
+There are several common cases when such a mismatch occurs:
+
+* The position and size of the `<app>` element (or however the root component of your Blazor app is called) does not match the `<body>`.
+
+* 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).
+
+* There are CSS rules that alter the positioning of an element or class used in the Telerik popup elements.
+
+* 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.
+
+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.
+
 ## See Also
 
 * [JavaScript Errors Troubleshooting]({%slug troubleshooting-js-errors%})
