Icon 24px

4 posts, 0 answers
  1. lupotana
    lupotana avatar
    73 posts
    Member since:
    Nov 2006

    Posted 13 Oct 2011 Link to this post

    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 ?
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 13 Oct 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. lupotana
    lupotana avatar
    73 posts
    Member since:
    Nov 2006

    Posted 13 Oct 2011 Link to this post

    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
    :-)
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 13 Oct 2011 Link to this post

    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
Back to Top