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

Need to create different height buttons

17 Answers 133 Views
Button
This is a migrated thread and some comments may be shown as answers.
Selva M
Top achievements
Rank 2
Selva M asked on 17 Feb 2011, 03:18 PM
Hi,
  I need to create buttons with variable heights and color theme as in my attached sample image. I succeeded creating various color theme but i'm not able to change the height of the button as its mentioned in button.css. Can anybody help me out to get this done.

Thanks,
Selva

17 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 18 Feb 2011, 07:15 AM
Hello Selva,

You can use RadButton as an Image Button to achieve the required appearence. Take a look at the following documentation for more on this.
RadButton as an Image Button

Thanks,
Shinu.
0
Selva M
Top achievements
Rank 2
answered on 18 Feb 2011, 12:44 PM
Hi Shinu,
  Thanks for the reply. Is there any possiblity to implement the same using Standard button, as there's need to apply localization and change the icons based on some conditions..

Thanks,
Selva
0
Vincent
Top achievements
Rank 1
answered on 21 Feb 2011, 03:29 AM
Yes, I am also having the same problem, it's pretty hard to overwrite the button.css. I tried different approach as mentioned on telerik blog, it doesn't work. 

see my question

http://www.telerik.com/community/forums/aspnet-ajax/button/how-to-overwrite-this-css.aspx
0
Accepted
Bozhidar
Telerik team
answered on 21 Feb 2011, 05:00 PM
Hello Selva,

To have default buttons with different height you should create your own sprite with the necessary images and a piece of CSS code to position the new height button dimensions and background positions.

Vincent, the provided code works as expected. Attached is button.gif showing the result in the browser from the code provided at: http://www.telerik.com/community/forums/aspnet-ajax/button/how-to-overwrite-this-css.aspx.

You could find also attached HeightProjectFiles.zip containing a small project with the same CSS and a sprite image that creates button with 40px height. If you use the same approach you could create as many different height buttons as you need.


All the best,
Bojo
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Selva M
Top achievements
Rank 2
answered on 02 Mar 2011, 06:27 AM
Hi Bojo, 
  Thanks for the solution. I need one more thing in that. I also need to resize the icon width and height for the same button. How to achieve that result. 

Thanks,
Selva

0
Bozhidar
Telerik team
answered on 02 Mar 2011, 08:25 AM
Hi Selva,

In the RadButton Icon resources we have all embedded icons sized 16x16 pixels and 24x24 pixels. You could look at the following demo: Bigger Icons and Buttons.

If you need icons different size than 16x16 or 24x24, you should create your own icon bundle with your preferred size.

Regards,
Bojo
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Vasssek
Top achievements
Rank 1
answered on 24 Mar 2011, 10:38 PM
Hello Bojo,

your custom css styles work well, but I couldn't set style for hovered disabled radbutton. I want to disable changing of style when radbutton is disabled and user rolls cursor over it.

I've tried some combinations but without success. I think that it should be something like this, but it doesn't work...
.customHeight40 .rbDisabled:hover,
.customHeight40 .rbDisabled:focus, 
.customHeight40 .rbDisabled:active
{
       background-position: right 0 !important;
}

Could you please help me to point out proper style for hovered disabled radbutton ?

Best regards Vasssek

0
Bozhidar
Telerik team
answered on 25 Mar 2011, 08:34 AM
Hello Vasssek,

The necessary styles for the disabled styles are:

/* disabled button */
        a.rbVerticalButton.rbDisabled.customHeight40:hover,
        a.rbVerticalButton.rbDisabled.customHeight40:focus,
        a.rbVerticalButton.rbDisabled.customHeight40:active
        {
            background-position: right 0;
        }
 
        a.rbVerticalButton.rbDisabled.customHeight40:hover .rbDecorated,
        a.rbVerticalButton.rbDisabled.customHeight40:focus .rbDecorated,
        a.rbVerticalButton.rbDisabled.customHeight40:active .rbDecorated
        {
            background-position: left -40px;
        }

Just put them in the end of the custom CSS.

Best wishes,
Bojo
the Telerik team
0
Vasssek
Top achievements
Rank 1
answered on 25 Mar 2011, 11:44 AM
Hello,

your css addition for disabled radbutton control works perfect !

Thank you...

Vasssek
0
mani
Top achievements
Rank 1
answered on 28 May 2011, 05:32 AM
i need text box validation coding exp if i click text box  at the time the message show "please enter the value"
0
Bozhidar
Telerik team
answered on 30 May 2011, 07:43 AM
Hello,

I am not quite sure what your scenario should be. RadButton does not support text box. I think RadToolTip could be useful for your scenario.

Kind regards,
Bojo
the Telerik team

Browse the vast support resources we have to jump start 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
Mike
Top achievements
Rank 1
answered on 07 Jun 2011, 06:49 PM
I recently started using the RadButton and I really like it.  I created custom sprites with a button height of 28px and they look really nice with color gradients and rounded corners.  And I plan to use the SplitButton feature, so now I'm planning to add the split button parts to the GIF.  I was wondering if there is an example like the one posted above that shows how to set the CSS (especially the background-positions) for custom height split buttons?  Or could you point me in the right direction on figuring out the right settings myself?  I'm new to telerik and sometimes it's a bit challenging for me to getting the CSS right for overriding the embedded skins.
0
Bozhidar
Telerik team
answered on 08 Jun 2011, 08:34 AM
Hello Mike,

The best solution would be to create a separate sprite including the split buttons only. Then you could add the additional CSS that will override the original base positions according to your new design requirements.

Attached is HeightProjectFiles.zip containing old 40px height button files updated with a few extra CSS lines that overrides base styles and allow button to work correctly with 40px height Split Buttons:

/* SplitButton */
         
        a.customHeight40 .rbSplitRight,
        a.customHeight40 .rbSplitLeft
        {
            background-image: url(splitButton40.gif) !important;
        }
         
        .customHeight40 .rbSplitRight
        {
            right: 0;
            background-position: 0 0;
        }
 
        .customHeight40 .rbSplitRight:hover
        {
            background-position: -18px 0;
        }
 
        .customHeight40 .rbSplitRight:focus,
        .customHeight40 .rbSplitRight:active
        {
            background-position: -36px 0;
        }
 
        .customHeight40 .rbSplitLeft
        {
            left: 0;
            background-position: -54px 0;
        }
 
        .customHeight40 .rbSplitLeft:hover
        {
            background-position: -72px 0;
        }
 
        .customHeight40 .rbSplitLeft:focus,
        .customHeight40 .rbSplitLeft:active
        {
            background-position: -90px 0;
        }
         
        /* Disabled split buttons */
        .customHeight40.rbDisabled .rbSplitRight:hover,
        .customHeight40 .rbDisabled .rbSplitRight:active,
        .customHeight40 .rbDisabled .rbSplitRight:focus
        {
            background-position: 0 0;
        }
 
        .customHeight40.rbDisabled .rbSplitLeft:hover,
        .customHeight40.rbDisabled .rbSplitLeft:active,
        .customHeight40.rbDisabled .rbSplitLeft:focus
        {
            background-position: -54px 0;
        }

In the project you will find also splitButton40.gif sprite, containing the new height split buttons.

If you want them to be wider than the original 18ox width, to let`s say 25px, you should add alos the following CSS:

a.customHeight40 .rbSplitRight,
        a.customHeight40 .rbSplitLeft
        {
            width: 25px;
        }

Of course you will need to adjust the background positions also, with the new 7px added to the original width of the split button:

/* SplitButton */
        
       a.customHeight40 .rbSplitRight,
       a.customHeight40 .rbSplitLeft
       {
           width: 25px;
       }
        
       a.customHeight40 .rbSplitRight,
       a.customHeight40 .rbSplitLeft
       {
           background-image: url(splitButton40.gif) !important;
       }
        
       .customHeight40 .rbSplitRight
       {
           right: 0;
           background-position: 0 0;
       }
 
       .customHeight40 .rbSplitRight:hover
       {
           background-position: -25px 0;
       }
 
       .customHeight40 .rbSplitRight:focus,
       .customHeight40 .rbSplitRight:active
       {
           background-position: -50px 0;
       }
 
       .customHeight40 .rbSplitLeft
       {
           left: 0;
           background-position: -75px 0;
       }
 
       .customHeight40 .rbSplitLeft:hover
       {
           background-position: -100px 0;
       }
 
       .customHeight40 .rbSplitLeft:focus,
       .customHeight40 .rbSplitLeft:active
       {
           background-position: -125px 0;
       }
        
       /* Disabled split buttons */
       .customHeight40.rbDisabled .rbSplitRight:hover,
       .customHeight40 .rbDisabled .rbSplitRight:active,
       .customHeight40 .rbDisabled .rbSplitRight:focus
       {
           background-position: 0 0;
       }
 
       .customHeight40.rbDisabled .rbSplitLeft:hover,
       .customHeight40.rbDisabled .rbSplitLeft:active,
       .customHeight40.rbDisabled .rbSplitLeft:focus
       {
           background-position: -75px 0;
       }

Please note, that the Split Buttons in the project were created with height of 40px and width of 18px and they will work properly with the CSS included in the project only. The above given 25px width CSS is just an example how to improve the existing CSS if you need wider split buttons.

Regards,
Bojo
the Telerik team

Browse the vast support resources we have to jump start 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
Mike
Top achievements
Rank 1
answered on 08 Jun 2011, 02:00 PM
Thanks very much, Bojo.  This RadButton control is giving me exactly what I need for this project.  Really like it.
0
Yoh
Top achievements
Rank 1
answered on 22 Jan 2012, 12:40 AM
If I just need to change the background color when the radbutton is disabled, what should I do?
0
Yoh
Top achievements
Rank 1
answered on 22 Jan 2012, 09:46 AM
I was using a custom Skin for a radButton control by changing the sprite image and css. But the problem I am facing right now is to change the backcround color when the radButton is disabled.  Say when enabled it's background is Blue but when disabled i want to change it to Red, How can I do that?
0
Bozhidar
Telerik team
answered on 23 Jan 2012, 10:18 AM
Hi,

The disabled state of RadButton is built with CSS only and sets an opacity to the disabled control. To have a different colored sprite, yous hould create a custom sprite with the diesired disabled colors and to apply it with CSS using rbDisabled CSS class:

<%@ 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.rbDisabled,
        .RadButton.rbDisabled .rbDecorated
        {
            background-image: url(disabled.gif);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Text="Some text" Skin="Web20" Enabled="false"></telerik:RadButton>
    </form>
</body>
</html>

Attached is the disabled custom sprite.

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
Selva M
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 1
Selva M
Top achievements
Rank 2
Vincent
Top achievements
Rank 1
Bozhidar
Telerik team
Vasssek
Top achievements
Rank 1
mani
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Yoh
Top achievements
Rank 1
Share this question
or