Radbutton radio & CssClass

6 posts, 0 answers
  1. David Borneman
    David Borneman avatar
    9 posts
    Member since:
    Sep 2005

    Posted 06 Jun 2011 Link to this post

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

    Posted 07 Jun 2011 Link to this post

    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.
  3. David Borneman
    David Borneman avatar
    9 posts
    Member since:
    Sep 2005

    Posted 07 Jun 2011 Link to this post

    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;
    
    }
  4. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 08 Jun 2011 Link to this post

    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.

  5. Mark
    Mark avatar
    1 posts
    Member since:
    Jun 2011

    Posted 17 Jul Link to this post

    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)
  6. Vessy
    Admin
    Vessy avatar
    1641 posts

    Posted 17 Jul Link to this post

    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.
Back to Top