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

Create icon button (no text)

2 Answers 427 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 07 Dec 2010, 10:12 PM
I'm trying to create a single icon button to launch a lookup window. I want the button to match the calendar popup button (Default skin) that can be viewed on this demo: http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx.

I tried creating a RadButton with an icon element (and no text property) but it still has a space to the right of the button (and has the button background whereas the calendar background is transparent until rollover). Any suggections?  
<telerik:RadButton ID="RadButton1" runat="server" >
    <Icon PrimaryIconUrl="images/icons/find.png" />
</telerik:RadButton>
 

 

 

 

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 08 Dec 2010, 02:00 PM
Hello Richard,

First of all please take a look at the icons that are embedded in the RadButton. You might find the needed icon there, so you wouldn't have to use external icon.

Now, regarding your scenario, I think the easiest way to achieve it is by setting a couple of RadButton properties. Setting the ButtonType to ToggleButton, will render the button as a simple "Label Button". If you show only an Icon, by setting the PrimaryIconCssClass (or PrimaryIconUrl), and leaving the Text property empty.

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        .btnClass:hover
        {
            border: 1px solid #99defd !important;
            background: #e2f3fc;
        }
        .RadButton, .RadButton span
        {
            cursor: pointer !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadButton ID="RadButton1" runat="server" Width="22px" CssClass="btnClass"
            ButtonType="ToggleButton" BorderColor="Transparent" BorderWidth="1px">
        <Icon PrimaryIconCssClass="rbSearch" PrimaryIconTop="2px" PrimaryIconLeft="3px" />
        </telerik:RadButton>
    </div>
    </form>
</body>
</html>


Kind regards,
Pero
the Telerik team
Browse the vast support resources we have to jumpstart 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
Richard
Top achievements
Rank 1
answered on 08 Dec 2010, 03:07 PM
Perfect! Thank you.
Tags
General Discussions
Asked by
Richard
Top achievements
Rank 1
Answers by
Pero
Telerik team
Richard
Top achievements
Rank 1
Share this question
or