[Solved] EmptyMessage style help needed

[Josh Anderson]

I've been trying to figure out how to accomplish a specific behavior and I haven't been too successful.  Here's what I'd like:

I want to specify an EmptyMessage for a radTextBox and specify a style that displays that message in a light gray color.  I have successfully accomplished this by setting the Skin property to "" and specifying my desired class for the EmptyMessageStyle-CssClass property.  When someone actually types, the text should appear in black.

These two things work, but the problem is in the in-between phase -- if the user hovers over the empty message text, it turns black!  I have tried forcing the hover style to not apply, but I've been unsuccessful.

Any suggestions?  I really don't want any hover behavior whatsoever.

Josh

[Dimo]

Hello Josh,

If you don't want a hover behavior, you can specify a hover style, which is either:

- identical to the "emptymesage" style,

or

- identical to the "enabled" style

You may need to set a "focused" as well. Please refer to this help article for more information on style properties and CSS classes:

http://www.telerik.com/help/radcontrols/prometheus/?input_AppearanceStyles.html


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Josh Anderson]

That proposed solution is what I tried, and it does not provide desirable results.  If I set the hover style to match the empty message style, then in my example actual text entered would turn light gray upon hover.  Likewise, if I set it to match the enabled style, the empty message will turn black on hover.

My problem is that I don't want any change to the text style in effect upon hover.  I don't want the light gray empty message text to turn black, nor do I want black entered text to turn gray.

Josh

[Dimo]

Hi Josh,

Well, in this case please try this:

Markup:

<telerik:RadTextBox
   ID="RadTextBox1"
   runat="server"
   Skin=""
   EmptyMessage="type here"
   ClientEvents-OnMouseOver="input_onmouseover" />

CSS:

.hoveredempty,
.radEmptyMessageCss
{
   color:red;
}

.hoveredfull,
.radEnabledCss,
.radFocusedCss
{
   color:blue;
}

Javascript:

//<![CDATA[

function input_onmouseover(sender, args)
{
    if (sender.get_value().length == 0)
    {
        sender.get_styles().HoveredStyle[1] = "hoveredempty";
        sender.updateCssClass();
    }
    else
    {
        sender.get_styles().HoveredStyle[1] = "hoveredfull";
        sender.updateCssClass();
    }
}

// ]]>

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center