Can't get rid of border around image buttons with latest release

10 posts, 0 answers
  1. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 27 Nov 2013 Link to this post

    After upgrading to the latest release, there is a border around all my image buttons inside of Radgrid columns.
    Prior to the latest update, I had the following css which worked fine for everything

    a img
    {
        border: 0px !important;
    }
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Nov 2013 Link to this post

    Hi Sam Tran,

    I guess you are using an ImageButton inside the GridTemplateColumn of a radgrid. Please try setting the BorderWidth property of the button.

    ASPX:
    <telerik:GridTemplateColumn>
     <ItemTemplate>
       <asp:ImageButton ID="ImageButton1" runat="server" BorderWidth="0px" ImageUrl="image.jpg" . . . />
     </ItemTemplate>
    </telerik:GridTemplateColumn>

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nicol
    Nicol avatar
    2 posts
    Member since:
    Oct 2012

    Posted 28 Nov 2013 Link to this post

    I'm also having the same issue and can't get rid of the border.
    here's the code:

                                               <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false"
                                                    CellPadding="2" CellSpacing="2" GridLines="None" BorderWidth="0" BorderColor="White"
                                                    ShowHeader="false" ShowFooter="false" AllowSorting="false" AllowPaging="false"
                                                    PagerStyle-Position="TopAndBottom" PagerStyle-Mode="NextPrevAndNumeric" PageSize="20"
                                                    HeaderStyle-Font-Bold="true" AllowFilteringByColumn="false">
                                                    <MasterTableView BorderWidth="0" Font-Bold="true" Font-Names="Arial" Font-Size="14px">
                                                        <Columns>
                                                            <telerik:GridTemplateColumn ItemStyle-BorderWidth="0px">
                                                                <ItemTemplate>
                                                                    <telerik:RadButton ID="btnUpdate" runat="server" Text="Update" BorderWidth="0px"
                                                                        BorderColor="Transparent" />
                                                                    <telerik:RadButton ID="btnDelete" runat="server" Text="Delete" BorderWidth="0px" />
                                                                </ItemTemplate>
                                                            </telerik:GridTemplateColumn>
                                                        </Columns>
                                                    </MasterTableView>
                                                </telerik:RadGrid>
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Nov 2013 Link to this post

    Hi,

    Please try the following css to get rid of the border.

    CSS:
    <style type="text/css">
        .RadGrid_SkinName input
        {
            border: 0px !important;
        }
    </style>

    Thanks,
    Princy.
  6. Nicol
    Nicol avatar
    2 posts
    Member since:
    Oct 2012

    Posted 29 Nov 2013 Link to this post

    Worked! Thanks!
  7. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 02 Dec 2013 Link to this post

    Not acceptable solution.
    That CSS removes the border on all input controls including textboxes and buttons.

    When used in conjunction with the form decorator, everything looks off.

    The majority of the form has borders around the textboxes and buttons, but then this css removes all borders for all inputs in grids; so end up with a page where some things have borders and then a grid that doesn't match.

    By the way, this works for all themes:
    div.RadGrid input {
        border: 0px !important;
    }


    I've tried variations on this:
    div.RadGrid img {
        border: 0px !important;


    But nothing works.

    I'd like it to be the way it was.  Borders and border colors controlled by the built-in telerik themes (I'm using all of them), but no border on image buttons.
  8. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 02 Dec 2013 Link to this post

    Update:

    Removing the !important appears to result in the desired effect:
    Borders are retained on textboxes and buttons but are removed on image buttons.

    As my app uses all your themes, our QA dept will verify this solution works in all themes, but it appears to work on the couple themes I tested.

    div.RadGrid input {
        border: 0px;
    }
  9. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 05 Dec 2013 Link to this post

    Hello Sam,

    We are aware of the issue you describe, it is fixed and you can download the latest internal build where the fix is included. Also you can use the following workaround:

    CSS:

    div.RadGrid input[type="image"],
    div.RadGrid input[type="radio"],
    div.RadGrid input[type="checkbox"],
    div.RadGrid input[type="submit"],
    div.RadGrid input[type="range"]
    {
        cursor: pointer;
        background-color: transparent;
        border-width: 0;
    }

    Note: the !important clause should never be used for something different that overwriting inline styles. We recommend to avoid it whenever possible.

    Regards,
    Venelin
    Telerik
    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 the blog feed now.
  10. Filipe Peixinho
    Filipe Peixinho avatar
    41 posts
    Member since:
    May 2006

    Posted 06 Dec 2013 Link to this post

    Hello Venelin,

    I use na <asp:button...> with a background-image defined in the applied css class.
    The rendered HTML is <input type="button" ...> and the fix you presente don't work because I think selector is missing for type button. Even the nightly build 2013_3_1203 don't present the fix for this kind of input.

    Did you forget the selector for this input type or is there a good reason not to add it to your solution?

    Regards
    Filipe
  11. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 11 Dec 2013 Link to this post

    Hi Filipe,

    Thanks for the feedback, we will take this into account and fix the problem as soon as possible. In the meantime, if the addition of the new selector for type="button" solves the issue on your side you can use it. However if you have any more problems please share them so we can take care.

    Regards,
    Venelin
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017