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

Extra Border Appears When Changing The Height

3 Answers 34 Views
Button
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 2
Danny asked on 07 Sep 2012, 05:14 PM
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? 

3 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 09 Sep 2012, 10:07 AM
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).
0
Danny
Top achievements
Rank 2
answered on 10 Sep 2012, 01:25 PM

.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.

0
Accepted
Slav
Telerik team
answered on 11 Sep 2012, 10:16 AM
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.
Tags
Button
Asked by
Danny
Top achievements
Rank 2
Answers by
James
Top achievements
Rank 1
Danny
Top achievements
Rank 2
Slav
Telerik team
Share this question
or