RadControl popups in RadWindow have positioning issues in IE

[Smith]

Hello,

I have a RadWindow modal open a page that contains 2 user controls. One of the user controls has a RadGrid (in yet another user control) and a couple of RadEditors, RadDatePickers and RadComboBoxes. It's a fairly long form that requires a lot of scrolling in the modal.

Everything works as expected in FF. In IE, though, the popups for the RadComboBoxes and the calender popup for the RadDatePicker controls are positioned absolute to the RadWindow's form's top, instead of where the control is on the page.

For example, if I scroll to the middle of the RadWindow so that the RadComboBox is 50px from the top of the viewable window, the actual popup (rcbSlide) is 50px from the top of the form. I need to scroll up in order to actually see the popup selections.

I'm probably missing something simple, but I've been banging my head on a wall about this for the better part of today.

Thanks for any assistance.

Smith

EDIT:
FF version 9
IE version 9
Telerik Controls 2011.3.1115.40

[Marin Bratanov]

Hello Smith,

Please check your CSS for rules regarding these popups (the combo) - for example if their positioning is changed somehow (either by some global rule in your own stylesheet or some override of the control's you are using). This is easiest done by temporarily removing all custom CSS. If the issue is gone then you can start adding it one piece at a time till the problematic code is found. Also, is it possible that there is some JavaScript error on the page that manifests only under IE? If so - does resolving it alleviate the situation? If this doesn't help please isolate this case in a simple, runnable page and post it so we can examine it.


Regards,
Marin
the Telerik team

[Smith]

Thanks Marin,

I did as you suggested. Turns out it's the "box-sizing: border-box;" css rule for all divs in one of the stylesheets. On further digging I see that IE9 is running in quirks mode and when changed to standards mode the combobox dropdowns render as they should in the modal. For whatever reason, the original designers decided to force IE9 to renders into quirks mode instead of standard by adding a commented out doctype at the top of the master page. The master page for the modal does not have this commented doctype at the top and the page runs in standards mode, with properly positioned boxes, when opened outside the modal.

I've replicated my structure as best I could in another project with the same stylesheet, doctypes and page nesting but I can't seem to make it fail. I must be missing something in my test project.

In the end, adding the same commented doctype to the modal master solved my issue. I'm really at a loss at what exactly is going on here. It certainly appears that when IE is in quirks mode and a modal is opened up that IE would render in standards mode it causes some layout problems.

Thanks for your help!

Smith

[Marin Bratanov]

Hi Smith,

Generally it is best if the XHTML 1.0 Transitional doctype is used for both the main and the content pages. If you are overriding some of the CSS of the RadControls it is possible that this is the reason for this layout issue, yet I cannot say anything more accurate at this point. In case using quirks mode works for you you can keep using it like that, but keep an eye out for other issues this may produce, as this rendering mode is full of bugs since it actually resembles extremely old browsers like IE6 and even IE 5.5. What I can advise is that you enable the correct doctype and try to find the CSS rule from your stylesheets that causes the issue, but whether you do this is decision only you can make.


All the best,
Marin
the Telerik team