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

Radbutton radio & CssClass

5 Answers 289 Views
Button
This is a migrated thread and some comments may be shown as answers.
David Borneman
Top achievements
Rank 1
David Borneman asked on 07 Jun 2011, 12:57 AM
I need the selected radio button to have a different cssclass than the unselected in the group. How would I do this. I tried this but the cssclass doesn't work at all - it works if I apply it to the RadButton but not on each state. In other words I want the selected radio to be green and unselected to be red:
 <telerik:RadButton ID="rbStandard" runat="server" ToggleType="Radio"
               GroupName="Radgrp" ButtonType="ToggleButton" AutoPostBack="false">
    <ToggleStates>
          <telerik:RadButtonToggleState Text="Standard" CssClass="ComicRed" />          
     <telerik:RadButtonToggleState Text="Standard" CssClass="ComicGreen" />
       </ToggleStates>  
</
telerik:RadButton>
<telerik:RadButton ID="rbLite" runat="server" ToggleType="Radio"
               GroupName="Radgrp" ButtonType="ToggleButton" AutoPostBack="false">
    <ToggleStates>
          <telerik:RadButtonToggleState Text="Lite" CssClass="ComicRed" />          
     <telerik:RadButtonToggleState Text="Lite" CssClass="ComicGreen" />
       </ToggleStates>  
</
telerik:RadButton>

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 07 Jun 2011, 06:35 AM
Hello David,

I have tried with the following CSS and that worked as expected.

CSS:
  .ComicRed
    {
        background-color:Red;
    }
.ComicGreen
    {
     background-color:Green;
    }

Thanks,
Shinu.
0
David Borneman
Top achievements
Rank 1
answered on 07 Jun 2011, 05:24 PM
I need it to change the font color and size, not the background color.

.ComicGreen
{
    font-family"Comic Sans MS";
    font-weightbold;
    color#009B3F;
    font-sizelarge;
}
.ComicRed
{
    font-family"Comic Sans MS";
    font-weightbold;
    color#FF0000;
    font-sizemedium;
}
0
Pero
Telerik team
answered on 08 Jun 2011, 07:08 AM
Hello David,

The RadButton's text is rendered as a <span/> element (when used as a ToggleButton), which is placed inside an <a/> element - the holding HTML element of the control. This means that the CssClass will be set to the <a/>, and since the <span/> has already color applied, the color you are setting through CSS will not be reflected on the control's text. You should change your CSS code in the following way:
<style type="text/css">
    .ComicGreen .rbText
    {
        font-family: "Comic Sans MS";
        font-weight: bold;
        color: #009B3F;
        font-size: large;
    }
    .ComicRed .rbText
    {
        font-family: "Comic Sans MS";
        font-weight: bold;
        color: #FF0000;
        font-size: medium;
    }
</style>


Kind regards,
Pero
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
Mark
Top achievements
Rank 2
answered on 17 Jul 2017, 07:57 AM
Hi There,

We have tried to update our application with latest Telerik Ajax UI dll (2017.2.711.35).After updating with latest dll,

rad buttons are rendering in different way than previous version.

Please check the below,screenshots... in that rad button are rendered in chrome browser (Version 59.0.3071.115 (Official Build) (64-bit) ) as <a .. ></a> tag. but with latest version telerik dll, it displayed as <span> </span>.

Due to that our styles are not applied properly. why its rendering as span? 

What exactly we have to do to avoid style code changes. please guide us.


In the below sample, we have created a new page with 2 rad buttons. checked how its rendering in browser.After checking that we found that its rendering in different format . please see the screenshot below.

Our Latest Version : (Rendered as shown below)
0
Vessy
Telerik team
answered on 17 Jul 2017, 12:41 PM
Hi Mark,

I have just answered your support ticket on the matter, for convenience I am copying my answer here as well:

The anchor wrapping element of the button is changed to SPAN in order to be HTML5 compliant. This Breaking change was introduced in our 2013 Q1, please refer the following thread for more details on the matter:
http://www.telerik.com/forums/breaking-change-since-q1-2013-radbutton-s-rendering-is-html5-compliant


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Button
Asked by
David Borneman
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
David Borneman
Top achievements
Rank 1
Pero
Telerik team
Mark
Top achievements
Rank 2
Vessy
Telerik team
Share this question
or