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

5 posts, 1 answers
  1. Brete
    Brete avatar
    33 posts
    Member since:
    Feb 2008

    Posted 10 Feb 2011 Link to this post

    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>

     

     

     

     

  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 15 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cedric
    Cedric avatar
    15 posts
    Member since:
    Apr 2008

    Posted 17 Jun 2011 Link to this post

    Thanks a lot, you just saved my life!
  5. Nicolaï
    Nicolaï avatar
    160 posts
    Member since:
    Apr 2008

    Posted 31 Jul 2012 Link to this post

    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".
  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 02 Aug 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017