Buttons Floating out of RadGrid + Blank Cells! [IE]

[Diana]

Hello,

I have a RadGrid positioned inside the upper pane of a RadSplitter. I added a GridTemplateColumn to hold a RadButton with an Icon [green down arrow]. The grid is set to allow scrolling. All goes just well in Chrome; but the weird problem I am facing is that , in IE, and once the scrollbar shows, the buttons start to float out of the grid and the splitter! They even transcend the lower pane and page borders [as shown in the attached pic "wrong"]. But it's not the case when the data is accommodated inside the grid with no scrollbar [as shown in the attached pic "right"]. Also, sometimes when the cells are empty, the grid inside borders disappear in some areas and cells kind of merge as shown! Again, this happens only in IE.
I hope you can enlighten me; as this is urgent and IE is the default browser in the company I work for.

Thank you!
 
[Edit: oops, I don't seem to find a way to attach my demo pics. ? :)] 

[Shinu]

Hi Diana,

I am not quite sure about your requirement. Try setting the following CSS to prevent the overflow of RadButton.
CSS:

<style type="text/css">

.rgDataDiv
{

 position: relative;

}

</style>

Thanks,
Shinu.

[Diana]

Hi Shinu,

Thank you for replying!

Can you please tell me how to attach pictures to my reply so as to demonstrate my case?

[Pavlina]

Hello Diana,

This behavior is a result of a IE 6/7 bug with positioning relative elements in containers with overflow, described in this article. The RadButton has position: relative applied to the <a> element, and the RadGrid's <div/> that has the scroll-bar shown, doesn't. Therefore, applying position:relative to the <div/> should resolves the issue:

<style type="text/css">
    .RadGrid .rgDataDiv
    {
        position: relative;
    }
</style>

Kind regards,
Pavlina
the Telerik team