Numeric Textbox losing css class on mouse over

2 posts, 0 answers
  1. Hans de Gier
    Hans de Gier avatar
    3 posts
    Member since:
    Sep 2006

    Posted 03 Oct 2011 Link to this post

    Hello Telerik support,

    We have several numeric textboxes throughout our web application and we added our own styling to them through adding a css class to them ("moneybox"). However, they lose this added class after a mouse over.
    I think the problem lies with the fact that you change the css classes with Javascript on mouse over and mouse out, and then forget to re-attach the user-added css class.
    How can we solve this problem? Besides the solution we have implemented now, which is, adding the css class again after the mouse over through the use of Javascript (jquery), as you see below:

    <Telerik.Web.UI.RadNumericTextBox ID="tbActivityValue" Culture="nl-NL" CssClass="moneybox" NumberFormat-DecimalDigits="2" runat="server" MinValue="0" TabIndex="1"></Telerik.Web.UI.RadNumericTextBox>


    Added jquery:
    /* Add class moneybox to the Telerik Numeric Textboxes in the repeater */
            $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").addClass("moneybox");
            $(".numerictextboxholder .riTextBox.riHover").mouseout(function() {
                $(".numerictextboxholder .riTextBox.riHover").addClass("moneybox");
            });
            $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").mouseout(function() {
                $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").addClass("moneybox");
            });
            $(".numerictextboxholder .riTextBox.riHover").mouseover(function() {
                $(".numerictextboxholder .riTextBox.riHover").addClass("moneybox");
            });
            $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").mouseover(function() {
                $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").addClass("moneybox");
            });
            $(".numerictextboxholder .riTextBox.riFocused").blur(function() {
                $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").addClass("moneybox");
            });
            $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").blur(function() {
                $(".numerictextboxholder .riTextBox.riEnabled.sfi_textbox").addClass("moneybox");
            });
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 06 Oct 2011 Link to this post

    Hi,

    This is expected to happen because the NumericTextBox applies different styles on hover, focus, blur, and etc. Check this help topic for more information:
    http://www.telerik.com/help/aspnet-ajax/input-styles.html
    Also see my reply in this forum thread:
    http://www.telerik.com/community/forums/aspnet-ajax/input/radtextbox-changing-color-on-mouseover-for-no-reason.aspx

    Kind regards,
    Vasil
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top