Need to create different height buttons

18 posts, 1 answers
  1. Selva M
    Selva M avatar
    26 posts
    Member since:
    Mar 2010

    Posted 17 Feb 2011 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Selva M
    Selva M avatar
    26 posts
    Member since:
    Mar 2010

    Posted 18 Feb 2011 Link to this post

    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
  5. Vincent
    Vincent avatar
    70 posts
    Member since:
    Jul 2008

    Posted 20 Feb 2011 Link to this post

    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
  6. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 21 Feb 2011 Link to this post

    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!
  7. Selva M
    Selva M avatar
    26 posts
    Member since:
    Mar 2010

    Posted 02 Mar 2011 Link to this post

    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

  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 02 Mar 2011 Link to this post

    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!
  9. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 24 Mar 2011 Link to this post

    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

  10. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 25 Mar 2011 Link to this post

    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
  11. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 25 Mar 2011 Link to this post

    Hello,

    your css addition for disabled radbutton control works perfect !

    Thank you...

    Vasssek
  12. mani
    mani avatar
    2 posts
    Member since:
    May 2011

    Posted 28 May 2011 Link to this post

    i need text box validation coding exp if i click text box  at the time the message show "please enter the value"
  13. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 30 May 2011 Link to this post

    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.

  14. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 07 Jun 2011 Link to this post

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

    Posted 08 Jun 2011 Link to this post

    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.

  16. Mike
    Mike avatar
    25 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    Thanks very much, Bojo.  This RadButton control is giving me exactly what I need for this project.  Really like it.
  17. Yoh
    Yoh avatar
    3 posts
    Member since:
    Jan 2012

    Posted 21 Jan 2012 Link to this post

    If I just need to change the background color when the radbutton is disabled, what should I do?
  18. Yoh
    Yoh avatar
    3 posts
    Member since:
    Jan 2012

    Posted 22 Jan 2012 Link to this post

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

    Posted 23 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017