Setting Disabled Style Toogle Button

2 posts, 0 answers
  1. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 12 Apr 2012 Link to this post

    Hi!

    We wrote an acsx control and everything seems to work well except for the disabled state. Is it possible to override the image when disabled? (See attached image.) This does not seem to work. It appears to use the enabled images and then sets the opacity.

    Thanks!
    Michael

    .checkboxUnchecked
    {
        background: #EBEFF3 url('/Images/CheckBoxUnchecked.png') no-repeat 0px 50% !important;
    }
     
    .checkboxChecked
    {
        background: #EBEFF3 url('/Images/CheckBoxChecked.png') no-repeat 0px 50% !important;
    }
     
    /* not working */
    .checkboxChecked.rbDisabled
    {
        background: #EBEFF3 url('/Images/CheckBoxCheckedDisabled.png') no-repeat 0px 50% !important;
    }
     
     
     
     
    <div id="divCheckboxControls" style="display: inline-block; white-space: nowrap; margin: 2px; padding: 10px; ">
        <asp:Label ID="labelRequiredField" runat="server" text="*" cssclass="labelrequiredstyle" Visible="false" />
        <asp:Label ID="labelForCheckBox" runat="server" text="#" cssclass="labelstyle" />
        <asp:Label ID="labelForReadOnlyData" runat="server" cssclass="labelstylereadonly" Visible="false" EnableViewState="true"/>
        <telerik:RadButton ID="checkBox" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton" AutoPostBack="false" CssClass="checkBox" DisabledButtonCssClass="checkBox" CausesValidation="false" EnableViewState="true">
            <ToggleStates>
                <telerik:RadButtonToggleState Text="." PrimaryIconCssClass="checkboxChecked"/>
                <telerik:RadButtonToggleState Text="." PrimaryIconCssClass="checkboxUnchecked"/>
            </ToggleStates>
        </telerik:RadButton>
    </div>
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 16 Apr 2012 Link to this post

    Hello Michael,

    Please check below code snippet.
    <style type="text/css">
               .rbDisabled
               {
                   opacity: 0.9 !important;
               }
               .rbDisabled .rbToggleCheckbox, .rbDisabled .rbToggleCheckboxChecked, .rbDisabled .rbToggleRadio, .rbDisabled .rbToggleRadioChecked, .rbDisabled .rbToggleCheckboxFilled
               {
                   opacity: 0.9 !important;
               }
           </style>


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top