For example, if the body's left offset is 400px, then that's how far off to the right the popup window is misplaced. If I shrink my browser window so it just fits the body (making the body margin effectively 0) then the popup is positioned correctly.
So, it appears that having an auto margin on a parent element is not being handled properly when calculating the position of the popup container.
5 Answers, 1 is accepted
I am not sure that I understand exactly your setup. You set margin: 0 auto to the body, and then you said that you have left offset of 400px, how do you set this offset? Isn't it set to auto already?
Please edit this example, so it can show the issue:
http://jsbin.com/duday/2/edit
Regards,
Kiril Nikolov
Telerik
Rank 1
window is).
I updated the jsbin sample and only needed to modify one detail. The css postion on body is now set to relative.
http://jsbin.com/vapiw/1/edit?html,css,output
Setting position relative to the body element is not supported with Kendo UI. All the popups that we use are aligned to the body, so the behavior that you see is expected. If you want to center the body, you can just another elements that you can apply your styling to.
Regards,
Kiril Nikolov
Telerik
Rank 1
Veteran
I know this is a very old post. But, I ran in to this issue today. Setting margin:auto on the Body does indeed offset the dropdown box list.
I fixed this by setting the Body position:relative.
I am using Telerik Blazor UI 2.20, and .NET 5 Core Hosted WebAssembly project.
Hi Orrin,
Indeed, setting margin:auto to the body affects the DropDownList popup position (and other dropdown components such as Autocomplete, Multiselect) - see the second bullet under common cases for Wrong Popup position in this article.
The reason behind this behavior is that with such a setup the <TelerikRootComponent> will not match the <body> and the browser viewport and popup offset is the expected outcome.
In order not to experience such a mismatch in the position of the popup, you can also remove the default margin of the body element ( set margin:0 ) and apply the desired layout on an inner element (such as a <div> inside the app or body).
Regards,
Nadezhda Tacheva
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.