Radbutton radio & CssClass

4 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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;
    
    }
  5. 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.

Back to Top