RadTextBox EmptyMessage styles lost on hover

22 posts, 0 answers
  1. Jeff Beem
    Jeff Beem avatar
    15 posts
    Member since:
    Oct 2006

    Posted 31 Jan 2008 Link to this post

    I've set the style of the empty message to:
    <EmptyMessageStyle Font-Italic="True" ForeColor="#999999" /> 
    when hovering over the textbox, however, this style is lost and it reverts to it's default font.  Is there something else I need to set or is this a defect?

    Respectfully,

    Jeff Beem
  2. Petja
    Admin
    Petja avatar
    631 posts

    Posted 01 Feb 2008 Link to this post

    Hi Jeff Beem,

    The behavior you describe is the default one of RadInput controls. When the control is hovered the HoveredStyle (which has some default values if not set) is applied no matter if it has empty message or some value. Here are all RadInput appearance styles which styles the control:
    http://www.telerik.com/help/aspnet/input/?Appearance%20Styles.html
    Let us know if you have further questions.

    Kind regards,
    Petja
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rodrigo olivares
    Rodrigo olivares avatar
    9 posts
    Member since:
    Sep 2009

    Posted 12 May 2010 Link to this post

    I want use this feature, but I have a difference in the styles used:

    The input classes are toggled between EmptyMessageStyle and HoveredStyle, but I need this modification

    EmptyMessageStyle - EmptyMessageHoveredStyle - HoveredStyle

    It means that I need a special class combination indicating the Input element, empty and hovered.

    How i can override the necessary functions for reach this goal?

    By the way I'm using the Q2008 version with number 2008.3.1314.20

  5. Chris Dalessandri
    Chris Dalessandri avatar
    44 posts
    Member since:
    Aug 2005

    Posted 23 Sep 2010 Link to this post

    This behavior is frustrating.  If I put a RadInput and a RadComboBox on a form next to each other, it is obvious that the empty messages do not behave the same.  If you specify italics for the RadInput, it looks silly on hover before the control gets focus as the italics go away yet the text remains.  The RadComboBox behaves as I would expect.

    On hover, the RadInput removes the riEmpty class even though it is still empty.  If I specify a custom class through EmptyMessageStyle-CssClass, RadInput removes this as well on hover.  I don't get this.  Why would you not apply riHover and riEmpty (or my custom class)?

    Thanks.
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Sep 2010 Link to this post

    Hi Chris,

    Indeed, RadInput currently does not distinguish between "empty hovered" and "non-empty hovered" state, which we may change in the future. In the meantime, you can use the following technique.

    The JS code must be included or registered in the <body> in order to be parsed after the RadInput embedded scripts.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    html body form .RadInput .riEmpty
    {
        font-style:italic;
    }
     
    html body form .RadInput .riHover
    {
        color:#000;
    }
     
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="EmptyMessage" />
     
    <script type="text/javascript">
     
    Telerik.Web.UI.RadInputControl.prototype.updateCssClassOld = Telerik.Web.UI.RadInputControl.prototype.updateCssClass;
    Telerik.Web.UI.RadInputControl.prototype.updateCssClass = function()
    {
        if (this._hovered && this.__isEmptyMessage())
        {
            this.originalHoveredCss = this.get_styles()["HoveredStyle"][1];
            this.get_styles()["HoveredStyle"][1] += " " + this.get_styles()["EmptyMessageStyle"][1];
            this.updateCssClassOld();
            this.get_styles()["HoveredStyle"][1] = this.originalHoveredCss;
        }
        else
        {
            this.updateCssClassOld();
        }
    }
     
    </script>
     
    </form>
    </body>
    </html>


    All the best,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Chris Dalessandri
    Chris Dalessandri avatar
    44 posts
    Member since:
    Aug 2005

    Posted 28 Sep 2010 Link to this post

    Hi Dimo,

    I appreciate your time and your workaround.  However, I do not want to use Telerik internal methods and properties unless I absolutely have to.  This issue is an irritant but I can live with it.

    Thanks again.
  8. John Smith
    John Smith avatar
    8 posts
    Member since:
    Feb 2010

    Posted 15 Feb 2012 Link to this post

    Has anything been done about this?  Isn't it as simple as leaving the riEmpty class on the object regardless of hover status?
  9. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 15 Feb 2012 Link to this post

    Hi John,

    The riEmpty class is applied when the empty message is visible.

    The class is not changed when the user types or deletes text inside the input. And this is the reason that we could not change the classes when the input is in focus. It would stay riFocused when the input is in focus, regardless if it is empty or not.

    Regards,
    Vasil
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  10. John Smith
    John Smith avatar
    8 posts
    Member since:
    Feb 2010

    Posted 15 Feb 2012 Link to this post

    The issue is on hover, not focus
  11. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 15 Feb 2012 Link to this post

    Hello,

    You could add the "riEmpty" class on hover:

    <script type="text/javascript">
      function textBoxMouseOver(sender, args)
      {
        if (sender.get_value == "")
        {
          sender._textBoxElement.classList.add("riEmpty");
        }
      }
    </script>
    <telerik:RadTextBox runat="server" ID="TextBox1">
      <ClientEvents OnMouseOver="textBoxMouseOver" />
    </telerik:RadTextBox>

    Regards,
    Vasil
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  12. John Smith
    John Smith avatar
    8 posts
    Member since:
    Feb 2010

    Posted 18 Feb 2012 Link to this post

    I understand the work arounds but can there at least be the acknowledgement by Telerik that while this is not a bug, it is certainly is not being handling correctly and therefore should be fixed.  It also appears to be removing other custom classes I've applied.
  13. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 20 Feb 2012 Link to this post

    Hello,

    I can confirm that this behavior is not the most intuitive. You are right it would be better (and sound logically) to apply the 'riEmpty' when the input is empty regardless of that the Input is blured or focused.
    However we can not simply change this behavior, because it will cause troubles for all people that rely on this in their custom styling.

    If you need to apply custom classes, you could use the EnabledStyle-CssClass, HoveredStyle-CssClass and etc. of the RadInputControl to specify them.

    All the best,
    Vasil
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  14. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 23 May 2012 Link to this post

    Hi,

    Since you seems to making changes (for the better) in the 2012 Q2 that may break css anyway, isn't this a good opportunity to finally fix this?

    Regards
    Caesar
  15. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 24 May 2012 Link to this post

    Hello Caesar,

    In scenario when color of the empty message style is Red and the color of hovered is Blue, what should be the input when it is hovered and empty?

    If it gets the empty style, then people will complain that empty hovered looks like the empty non-hovered.
    And if it gets the hovered style, then the people will complain that the empty style is not applied when hover.

    I don't see here what is the right way or wrong way, they are both right depending on your needs and they are both wrong if they don't match your needs.

    I would talk to our front end developers if we could make some property that to determinate the behavior in such cases, and if there is clear way of doing this we will try to make it possible for the official Q2 release.

    All the best,
    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.
  16. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 24 May 2012 Link to this post

    Hi,

    If the input has both riEmpy and riHover when hovered then people could do as they please. For example:
    html body form .RadInput .riEmpty
    {
        font-style:italic;
        color: Red;
    }
      
    html body form .RadInput .riHover
    {
        color: Blue;
    }
     
    html body form .RadInput .riEmpty.riHover
    {
        color: Yellow;
    }

    Regards
    Caesar
  17. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 24 May 2012 Link to this post

    Hello Caesar,

    And what about IE6, I know it is dead, but it is difficult to convince some of the clients.
    Yet I think it is good idea to apply both classes in order to use multi-class selectors
    where it is possible, and indeed we will probably improve this.

    We still have some time to the official Q2 release, and I will be glad to here all suggestions about styling the inputs in real live scenarios. You may get the Beta from here, and tell us everything that bothers you.

    Greetings,
    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.
  18. Bala
    Bala avatar
    11 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    My Radtextbox has an empty message, if i set this textbox as focus from server side & after page load if i mouse ver the textbox the empty message is still there as a normal text. And even if i move the focus out of the textbox also the empty message is still there,,. This happens if i set the textbox focus in server side. txtbx.Focus()
  19. Jeffrey
    Jeffrey avatar
    1 posts
    Member since:
    Feb 2012

    Posted 15 Aug 2012 Link to this post

    Vasil,

    If riEmpty was left on in addition to riHover, other CSS code could be used which would even work in IE6, such as:

    html body form .RadInput .riEmpty
    {
        font-style:italic;
        color: Red !important;
    }
       
    html body form .RadInput .riHover
    {
        color: Blue;
    }

    The point is that if you leave the riEmpty class even when the control is hovered, then people will at least have a choice as to what behavior they want.  Right, now it takes a JS hack to achieve what many (or most?) perceive as the desired behavior.
  20. Bala
    Bala avatar
    11 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    Again after applying these styles  my hover style is changing (previously from grey to red) that's it nothing is happening. My problem is in page load if i set first editable focus then that control empty text is still there as static font. when i type something the empty text is also coming along with the text i type. Once if do a reset or a postback in that page then the style is setting as per standard.
  21. Galin
    Admin
    Galin avatar
    526 posts

    Posted 17 Aug 2012 Link to this post

    Hello Bala,

    This an already known problem and our developer are looking for a solution, In the meantime, you can focus the RadTextBox on client-side, e.g.
    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Test Page</title>
        <script type="text/javascript">
            function pageLoad() {
                $find("RadTextBox1").focus();
            }  
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" />
        <telerik:RadTextBox runat="server" ID="RadTextBox1" EmptyMessage="Empty Message" />
        </form>
    </body>
    </html>



    All the best,
    Galin
    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.
  22. Bala
    Bala avatar
    11 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2012 Link to this post

    Hi,

    This solution can't work out in my scenario, i have a page where dynamically controls will be rendered. When can i expect the solution coz it is occuring in all the pages where the radtextbox is set focus on pageload.
  23. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 30 Aug 2012 Link to this post

    Hi Bala,

    We have fixed the issue, and it will work correct into the Service Pack 2, that will be published in 12th of September. However I can not come up with another workaround that to be applied currently, except the one that Galin wrote already. Excuse us for the inconvenience caused. You can try out the next internal build that will be published in Tuesday, to see if everything will work alright. If you have any problems we will try to fix them as soon as possible, in order to work for the official Service Pack.

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