This is a migrated thread and some comments may be shown as answers.

RadTextBox EmptyMessage styles lost on hover

21 Answers 445 Views
Input
This is a migrated thread and some comments may be shown as answers.
Jeff Beem
Top achievements
Rank 1
Jeff Beem asked on 31 Jan 2008, 04:50 PM
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

21 Answers, 1 is accepted

Sort by
0
Petja
Telerik team
answered on 01 Feb 2008, 07:21 AM
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
0
Rodrigo olivares
Top achievements
Rank 1
answered on 12 May 2010, 11:32 PM
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

0
Chris Dalessandri
Top achievements
Rank 1
answered on 23 Sep 2010, 02:11 PM
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.
0
Dimo
Telerik team
answered on 28 Sep 2010, 12:54 PM
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
0
Chris Dalessandri
Top achievements
Rank 1
answered on 28 Sep 2010, 02:11 PM
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.
0
John Smith
Top achievements
Rank 1
answered on 15 Feb 2012, 09:55 AM
Has anything been done about this?  Isn't it as simple as leaving the riEmpty class on the object regardless of hover status?
0
Vasil
Telerik team
answered on 15 Feb 2012, 02:22 PM
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 >>
0
John Smith
Top achievements
Rank 1
answered on 15 Feb 2012, 02:55 PM
The issue is on hover, not focus
0
Vasil
Telerik team
answered on 15 Feb 2012, 04:43 PM
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 >>
0
John Smith
Top achievements
Rank 1
answered on 18 Feb 2012, 07:30 PM
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.
0
Vasil
Telerik team
answered on 20 Feb 2012, 01:31 PM
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 >>
0
Andreas
Top achievements
Rank 1
answered on 23 May 2012, 06:34 AM
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
0
Vasil
Telerik team
answered on 24 May 2012, 09:07 AM
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.
0
Andreas
Top achievements
Rank 1
answered on 24 May 2012, 09:31 AM
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
0
Vasil
Telerik team
answered on 24 May 2012, 12:04 PM
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.
0
Bala
Top achievements
Rank 1
answered on 14 Aug 2012, 08:23 AM
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()
0
Jeffrey
Top achievements
Rank 1
answered on 15 Aug 2012, 01:16 PM
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.
0
Bala
Top achievements
Rank 1
answered on 16 Aug 2012, 05:47 AM
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.
0
Galin
Telerik team
answered on 17 Aug 2012, 07:33 AM
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.
0
Bala
Top achievements
Rank 1
answered on 27 Aug 2012, 06:17 AM
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.
0
Vasil
Telerik team
answered on 30 Aug 2012, 07:54 AM
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.
Tags
Input
Asked by
Jeff Beem
Top achievements
Rank 1
Answers by
Petja
Telerik team
Rodrigo olivares
Top achievements
Rank 1
Chris Dalessandri
Top achievements
Rank 1
Dimo
Telerik team
John Smith
Top achievements
Rank 1
Vasil
Telerik team
Andreas
Top achievements
Rank 1
Bala
Top achievements
Rank 1
Jeffrey
Top achievements
Rank 1
Galin
Telerik team
Share this question
or