RadButton Not Displaying correctly in Grid (IE7 and IE8 running in compatablilty mode)

[Brete]

I am having a issue where Placing a Radbutton in a Grid Template Column, displays and functions correctly in IE8 but does not display correctly in IE7 or running IE8 in compatibility mode.  I saw a similar post but it dealt with the Resize event, my window is not being resized.

I have attached my code for the grid and a sample of the grid when viewed on IE7.  As you can see the buttons no longer scroll with the grid and are rendered above the grid. 

 

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
        GridLines="None" onneeddatasource="RadGrid1_NeedDataSource" Skin="Forest">

        <ClientSettings>
                <Scrolling AllowScroll="True" ScrollHeight="400px" UseStaticHeaders="True" />
            </ClientSettings>
<MasterTableView AllowPaging="True" PageSize="15">
<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>

    <Columns>
        <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column"
            UniqueName="TemplateColumn">
            <ItemTemplate>
              <telerik:RadButton ID="RadButton1" runat="server"
                                        Skin="Forest" Text="Edit Rec" >
                                        <Icon PrimaryIconCssClass="rbEdit" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                    </telerik:RadButton>
                                    </ItemTemplate>


        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn DataField="Signer_Name"
            FilterControlAltText="Filter column column" UniqueName="column">
        </telerik:GridBoundColumn>
    </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

    </telerik:RadGrid>

 

 

 

 

[Pero]

Hi Brete,

The problem is caused by a well-known bug in IE6 and IE7: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/. The RadButton has position: relative applied to the <a> element, and the RadGrid's <div/> that has the scroll-bar shown, doesn't. Applying position:relative to the <div/> resolves the issue:

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

Regards,
Pero
the Telerik team

[Cedric]

Thanks a lot, you just saved my life!

[Nicolaï]

Hello,

1st of all, if RadControls were fully supporting IE7, and 1 line of css fixes it, it should be included by default.

Not working now...
RadGrid inside a scolling radpane (splitter)...
Added   
.RadGrid .rgDataDiv
    {
        position: relative;
    }

And tried a multitude of divs with style attributes, and the radbuttons inside the radgrid still overflow, etc.
Searched Telerik website... This was closest match to my problem.
As was this:
http://www.telerik.com/help/aspnet-ajax/button-known-issues-ie6-ie7.html

But my buttons still overflow, appear "fixed".
Tired of fixing IE7 bugs with controls that were supposed to support IE7 "out of the box".

[Slav]

Hello Nicolaï,

As I explained in your support thread on the matter, this behavior is a result of a IE 6/7 bug with positioning relative elements in containers with overflow, described in this article. Fixing this behavior is a responsibility of the browser's developers because it is not a correct interpretation of the HTML markup.

Below I have included a sample code that demonstrates the solution so that other users with similar setup can benefit from it.

Page:

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
    Orientation="Horizontal" HeightOffset="150" Skin="Simple" VisibleDuringInit="false">
    <telerik:RadPane runat="server" ID="topPane" Scrolling="Y">
        <telerik:RadGrid runat="server" ID="planDG" Width="100%" AutoGenerateColumns="false"
            AllowAutomaticDeletes="true" AllowFilteringByColumn="true">
            <MasterTableView>
                <Columns>
                    <telerik:GridTemplateColumn HeaderText="Status" DataField="status_name" UniqueName="status_name"
                        SortExpression="status_name">
                        <ItemTemplate>
                            <div style="position: relative;">
                                <telerik:RadButton ID="changeStatusRadBtn" runat="server"
                                    ButtonType="StandardButton" AutoPostBack="true">
                                </telerik:RadButton>
                            </div>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadPane>
</telerik:RadSplitter>

Page's head section:

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

Feel free to contact us again if you run into more difficulties.

Kind regards,
Slav
the Telerik team