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

Icon 24px

3 Answers 79 Views
Button
This is a migrated thread and some comments may be shown as answers.
lupotana
Top achievements
Rank 1
lupotana asked on 13 Oct 2011, 09:50 AM
Hi I want use Icon 24x24 instead 16x16.
I must resize the height of button to 66px(height) for see the bottom border.
Button height 66px is too much for me (3x the height of image).
Do I do someting wrong? There is a workaround for fix the problem ?

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 13 Oct 2011, 10:51 AM
Hi,

Changing the height of the button will break the whole button layout as the background color, gradient and rounded corners are released with background sprite image.

Alternatively, you could set height of 65 pixels which is also built with sprites: Bigger Icons and Buttons. But you mentioned that height is too big for you.

If you want to use Default style button with different than 22 or 65 pixels, you will need to create your custom sprite and to modify the CSS: RadButton Custom Height Tutorial.

Greetings,
Bozhidar
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
0
lupotana
Top achievements
Rank 1
answered on 13 Oct 2011, 11:14 AM
I understand ... Unfortunately I do not have time to create me a custom button.
I will continue to use an ImageButton to 24x24 and then a RadBotton text only.
No problem but I suggest you think about improving the management of the images at 24 px around seeing many buttons because they use this resolution.

Bye Marco
:-)
0
Bozhidar
Telerik team
answered on 13 Oct 2011, 12:09 PM
Hi,

Thanks for your feedback. We have already discussed the possible options and we our opinion is that buttons height 22px which is the standard one is fine, while buttons height of 65px allows you to have vertical positioned elements inside the button. We have already been asked if we could create another default size of 35 pixels, but if we do that, we wil be flooded by requirements to create, 24, 28, 30, 40 etc different heights for the button, which will increase enormously the size of the controls.

On the other side, i could assure you that the suggested custom height tutorial is really easy, and it will take you just about 15-20 minutes to create it.

Otherwise, you could use Link button, which allows you to set any height, and to round its corners with a few CSS3:

<%@ 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">
        a.RadButton.rbLinkButton
        {
            border-radius: 4px;
            /* Safari 5.1, Chrome 10+ */
            background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
            /* Firefox 3.6+ */
            background: -moz-linear-gradient(top, #2F2727, #1a82f7);
            /* IE 10 */
            background: -ms-linear-gradient(top, #2F2727, #1a82f7);
            /* Opera 11.10+ */
            background: -o-linear-gradient(top, #2F2727, #1a82f7);
        }
         
        a.RadButton.rbLinkButton:hover
        {
            border-radius: 4px;
            /* Safari 5.1, Chrome 10+ */
            background: -webkit-linear-gradient(top, #1a82f7, #2F2727);
            /* Firefox 3.6+ */
            background: -moz-linear-gradient(top, #1a82f7, #2F2727);
            /* IE 10 */
            background: -ms-linear-gradient(top, #1a82f7, #2F2727);
            /* Opera 11.10+ */
            background: -o-linear-gradient(top, #1a82f7, #2F2727);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="30px button height"
        Height="30" Skin="Sunset">
        <Icon PrimaryIconCssClass="rbOk24" PrimaryIconTop="1" />
    </telerik:RadButton>
    </form>
</body>
</html>

I have also added a few CSS3 gradients for more funky styling. However, it will not work in IE.

Regards,
Bozhidar
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
lupotana
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
lupotana
Top achievements
Rank 1
Share this question
or