This is a migrated thread and some comments may be shown as answers.

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

4 Answers 168 Views
Button
This is a migrated thread and some comments may be shown as answers.
Brete
Top achievements
Rank 1
Brete asked on 11 Feb 2011, 12:28 AM
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>

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Pero
Telerik team
answered on 15 Feb 2011, 01:12 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Cedric
Top achievements
Rank 2
answered on 17 Jun 2011, 11:20 PM
Thanks a lot, you just saved my life!
0
Nicolaï
Top achievements
Rank 2
answered on 31 Jul 2012, 07:40 AM
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".
0
Slav
Telerik team
answered on 02 Aug 2012, 01:58 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Button
Asked by
Brete
Top achievements
Rank 1
Answers by
Pero
Telerik team
Cedric
Top achievements
Rank 2
Nicolaï
Top achievements
Rank 2
Slav
Telerik team
Share this question
or