[Solved] Styles for EmptyMessage

[David]

Hi

With  controls that support the EmptyMessage  tag - what is the style that is used to format this

Many thanks
Dave

[Dimo]

Hello David,

The empty state look of the NumericTextBox is triggered by the t-state-empty CSS class, which applies an itallic font style to the <input> element. You can use this CSS class for any other element to apply the same font style.

Greetings,
Dimo
the Telerik team

[David]

Many thanks for that Dimo.

That worked.. almost. 

I set the following style

 

 

.t-state-empty

 

{

 

 

font-style:italic;

 

 

 

font-size:2;

 

 

 

background-color:#c0FFFF;

 

}

And I can confirm that the Empty Message has been set to this style.. However only the message part.. not the background of the textbox.  This means that there is a lot of white space left after the  message. This will be fine if all I display is  'Enter Input' but not for  text of varying length.

Many thanks for any help

Dave

[Dimo]

Hi David,

I see that you are setting the empty-style CSS class to the DIV that holds the formatted value. You should set it to the INPUT element.

Here is some more information about the NumericTextBox HTML output:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-numerictextbox-html-output-and-css-styles.html

Greetings,
Dimo
the Telerik team

[David]

Hi Dimo
Sorry - I am a little puzzled here trying to work out what to do.
The  .t-state-empty is for the  div that is over the textbox. I can understand that. So I either need to increase the length of the div to cover the textbox or.
Change the background of the textbox itself and toggle between  onblur and onfocus to change the background color

Or have I missed something completely/ I have read the link you sent before when I was searching for the EmptyMessage style.

Many thanks for any advice
Dave

[Dimo]

Hello David,

Sorry about the misunderstanding - based on your first question I thought that you want to apply the t-state-empty CSS class manually.

In your case you can't use a background, because the <div> is not 100% wide by design. I tried to make it expand with custom CSS, but stumbled upon several cross-browser issues related to the element's alignment and positioning, so I suggest you to apply custom font styles only. If using a background color is a must, you should subscribe to the <input> element's focus and blur events and manage the empty-style CSS class manually.

Regards,
Dimo
the Telerik team

[David]

Hi Dimo

Unfortunately I have come to the same conclusions.  I took apart the Telerik.Textbox.Min.js to see how it handles the DIV aspects.

True - it is possible to find the size of the underlying textbox so to make the DIV the same width but likewise there are a LOT of cross browser issues (IE giving 'auto' and Firefox giving 'px')

That only leaves the OnBlur and  Focus events of the textbox.  So basically I would need to do the following

1. for both OnBlur and Focus get the  ID of the parent of the text box
2. If the  style of the parent is  t-empty-state then change the background of the textbox to  t-empty-state backgound
3. If the style of the parent is  t-formatted-value set the backgound to the default for the textbox

I would probally need to tweek the  DIV margings slightly so that the div is within the text-boxes borders.

Many thanks
Dave