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

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

9 Answers 520 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 27 Nov 2013, 03:27 PM
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;
}

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 28 Nov 2013, 05:22 AM
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
0
Nicol
Top achievements
Rank 1
answered on 28 Nov 2013, 08:38 PM
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>
0
Princy
Top achievements
Rank 2
answered on 29 Nov 2013, 04:59 AM
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.
0
Nicol
Top achievements
Rank 1
answered on 29 Nov 2013, 04:18 PM
Worked! Thanks!
0
Sam
Top achievements
Rank 1
answered on 02 Dec 2013, 02:02 PM
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.
0
Sam
Top achievements
Rank 1
answered on 02 Dec 2013, 02:10 PM
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;
}
0
Venelin
Telerik team
answered on 05 Dec 2013, 09:23 AM
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.
0
Filipe Peixinho
Top achievements
Rank 1
answered on 06 Dec 2013, 11:09 AM
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
0
Venelin
Telerik team
answered on 11 Dec 2013, 08:29 AM
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.
Tags
Grid
Asked by
Sam
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Nicol
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Venelin
Telerik team
Filipe Peixinho
Top achievements
Rank 1
Share this question
or