Extra Border Appears When Changing The Height

4 posts, 1 answers
  1. Danny
    Danny avatar
    35 posts
    Member since:
    May 2012

    Posted 07 Sep 2012 Link to this post

    I have some Metro-skinned radbuttons with a handful extra of CSS.  I've included the picture of the standard button (default size button).

    When I add an Icon and change the height to 24px, the old border on the right hand side re-appears (24px button with icon).

    I've tried increasing the strength of my CSS:

    .RadButton_Metro.rbSkinnedButton

     {

         background-color: #0077cc !important;

     }

     but to no avail...

    Any ideas? 
  2. James
    James avatar
    4 posts
    Member since:
    Jul 2011

    Posted 09 Sep 2012 Link to this post

    Hi Danny,

    Can you post the extra CSS on the button? It doesn't quite look like a standard Metro skin in the file Default-Size-Button-No-Icon.png, so it may be a side effect of the other styles you are applying. See http://demos.telerik.com/aspnet-ajax/button/examples/default/defaultcs.aspx and use the skin switcher. I would suggest tracing the rendered styles and disabling rules as necessary with your browser's developer tools (F12 in IE, Firebug, etc. in Firefox).
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danny
    Danny avatar
    35 posts
    Member since:
    May 2012

    Posted 10 Sep 2012 Link to this post


    .RadButton_Metro:hover .rbDecorated 
    {
        color: #ffCC33;
    }
      
    .RadButton_Metro .rbDecorated 
    {
        background-color: #0077cc;
        color: #fff;
    }
      
    .RadButton_Metro.rbSkinnedButton 
    {
        background-color: #0077cc !important;
    }


    Just a handful of rules.  The '.rbSkinnedButton' is what takes care of the 5 pixel border on the right hand side.

    It seems the border shows up only when I change the height.  Adding/removing the icon is not the cause. 

    As a temporary workaround, I've switched to link button.

  5. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 11 Sep 2012 Link to this post

    Hi Danny,

    When you set the Height property of a standard RadButton (ButtonType="StandardButton" or when the ButtonType property is not used) to a value greater than 22 pixels, the CSS class rbVerticalButton is applied instead of rbSkinnedButton. As a result when you set the Height to 24 pixels, your background color is not applied. To handle this scenario, please add the following style to the ones you have already specified:
    .RadButton_Metro.rbVerticalButton
    {
        background-color: #0077cc !important;
    }

    Feel free to contact us again if you run into more difficulties.

    Greetings,
    Slav
    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