[Solved] calling disable() in a javascript (client-side) causes display issue

[Nim]

Hello,

With IE (7.0.5730.13), calling disable() in a javascript (client-side) causes display issue (a "grey shadow" is created behind the first digit of the number; the output is not consistent as using C# code ".enable(false)" in server side).

I may reproduce the issue in the current demo website by using IE7.

http://demos.telerik.com/aspnet-mvc/numerictextbox/clientsideapi

In the demo, if I put "43.21" in the textbox, click "Set Value" then "Disable", similar issue occurs.

After that, if I double click the numeric box, an error window shows up, which says "...Runtime Error has occured. ... Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus..."

This problem does not occur in an older version of numericbox.  It does not occur in Firefox either.

Also in the server side, if I use ".InputHtmlAttributes(new {width:30px;text-align:right"})", the number will display twice in the numeric box.  The number is shown in "black" on the left side and the same number again in "grey" on the right side.  This did not occur in an older version as well.

Any comments?

Thank you.

[Dimo]

Hi Nim,

First of all, let me provide some information about the NumericTextBox HTML output and how it works:

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

In short, you have a <div> for the formatted value, which is positioned over an <input> with the unformatted value.

As you have seen in the help article above, when the NumericTextBox is blurred, the textbox content is hidden. However, Internet Explorer does not allow changing the text color of disabled elements or removing the text shadow. Hiding the text inside the textbox with negative text-indent style seems impossible (in IE). That's why we apply large letter-spacing style to the textbox, so that its content is hidden as much as possible and the formatted value is left visible. Unfortunately, when using letter-spacing, the first number in the textbox remains visible and this causes the shadow that you are seeing.

The alternative to the above is to hide the formatted value and display the textbox's unformatted value, but this is worse in terms of user experience. The component behavior was that before and we got a lot of support tickets about it. The current implementation and UX is lot less cumbersome.


With regard to right alignment, please refer to a forum thread of yours on the same topic:

http://www.telerik.com/community/forums/aspnet-mvc/numericinput/how-can-i-change-text-color.aspx

With regard to the Javascript error - I am afraid I was not able to reproduce it. Please provide a runnable example, so that I can test it locally.

All the best,
Dimo
the Telerik team

[Nim]

Hello,

> "...The alternative to the above is to hide the formatted value and display the textbox's unformatted value, but this is worse in terms of user experience. The component behavior was that before..."

I think in my case, since I don't change the format, the old behavior does not cause any issue to me.
But after the behavior is changed, what you describe in your reply - "... the first number in the textbox remains visible and this causes the shadow that you are seeing..." - becomes a new problem to me.

Is there any option that may make the numeric-box goes back to its old behavior?

> "...With regard to the Javascript error - I am afraid I was not able to reproduce it. ..."

Which version of IE do you use in your testing?
FYI, I generate the error through your demo website by clicking the "locked" number in the "disabled" numeric box:

http://demos.telerik.com/aspnet-mvc/numerictextbox/clientsideapi

I've attached the screenshot (screen_shot_1.png)

If I look closer, the error is triggered by telerik.textbox.min.js (screen_shot_2.png)

Since this is affecting our production, I hope to hear from you soon.

Many thanks,

Nim

[Dimo]

Hi Nim,

The only way to make the NumericTextBox go to its previous behavior with regard to the disabled state is to override the letter-spacing style with an !important clause and hide the formatted value (the div.t-formatted-value element) when the component is disabled.

.t-numerictextbox .t-input
{
     letter-spacing: 1px !important;
}


With regard to the Javascript error, it turned out it occurs in IE8 and IE7, but not in IE9 and its various modes. We identified the cause of the problem and fixed it. Changes will take effect in the next MVC internal build, which will be uploaded within the following couple of days.


Kind regards,
Dimo
the Telerik team

[Nim]

Here's an update for those who may be affected by the display issue.

A PIT item has been opened:
Issue ID 8383 - FIX NumericTextBox text shadow in IE when component is disabled
http://www.telerik.com/support/pits.aspx#/public/aspnet-mvc/8383

Also, per my discussion through the support ticket, when a complete fix is made available, users should remove the workaround mentioned in previous post.

[jenbagaraman j]

Hi,

     I have the same issue when i right align the value on Numeric Text box with disabled, it shows the values two times. A grey color value display at left side of the control and the same value display the right side of the control. Please help me to resolve the issue.

[Dimo]

Hello Jenbagaraman,

There is a link to a forum post in one of my previous replies, which shows what to do if you want a right alignment.

http://www.telerik.com/community/forums/aspnet-mvc/numericinput/how-can-i-change-text-color.aspx

Regards,
Dimo
the Telerik team

[jenbagaraman j]

Hi Dimo,

      I can able to right align the value on numerictextbox. It is working fine when it is enabled. But when it is disabled, the value is not properly displayed. Please refer the attached screenshot.


@(Html.Telerik().NumericTextBox()
                                                    .Name("ExportControlAssessment.ExpectedFuturePurchaseQuantity")
                                                    .InputHtmlAttributes(new { style = "width:100%;text-align:right" })
                                                    .Spinners(false)
                                                    .EmptyMessage("")
                                                    .DecimalDigits(2)
                                                    .Enable(Model.IsOtherFieldEnable)
                                                    .Value(Convert.ToDouble(Model.ExportControlAssessment.ExpectedFuturePurchaseQuantity))
                                                    .HtmlAttributes(new { @class = "rightalignValue" })
)


.CSS

.rightalignValue
{
    position: relative;
}
.rightalignValue .t-formatted-value
{
    left: auto;
    right: 0;
}

.rightalignValue .t-numerictextbox .t-input
{
    text-align: right;
}

Please help me to resolve this issue. 

[Dimo]

Hello Jenbagaraman,

You also need the third CSS rule:

.ra {
    position: relative;
}

.ra  .t-formatted-value {
    left: auto;
    right: 0;
}

.ra .t-input
{
    text-align: right;
    letter-spacing: 0 !important;
}

In addition, you when the component is disabled, you must hide the formatted value in IE, for example:

function enableNumericTextBox() {
    $("#IntegerTextBox").data("tTextBox").enable();
    if ($.browser.msie) {
        $("#IntegerTextBox").closest(".t-numerictextbox").find(".t-formatted-value").show();
    }
}

function disableNumericTextBox() {
    $("#IntegerTextBox").data("tTextBox").disable();
    if ($.browser.msie) {
        $("#IntegerTextBox").closest(".t-numerictextbox").find(".t-formatted-value").hide();
    }
}

If the NumericTextBox is initially disabled, you can hide the formatted value in the OnLoad client handler.

Greetings,
Dimo
the Telerik team

[jenbagaraman j]

Hi Dimo,

      I want to hide the unformatted value in the disabled numeric text box. Currently it is hide the formatted value and shows the unformatted value. I need to display the value with comma separator and right aligned in the disabled numeric text box. Please help me to resolve it.

[Dimo]

Hello Jenbagaraman,

Currently this is not possible in Internet Explorer, as explained in my previous replies.

Greetings,
Dimo
the Telerik team

[Nim]

Hello,

Due to the limitation, I've come up with another workaround for my codes:

I've something like:

<span id="section_a">
    <%= Html.Telerik().NumericTextBox().Name("real_box")... %>
</span>
<span id="section_b">
   <%= Html.TextBox("fake_box", ..., new {disabled = "true", ...} )%>
</span>

Assuming at the beginning, the numeric box should be enable, I use Javascript to hide "section_b" when the page is loaded.

When the numeric field needs to be disabled, my javascript will copy the value from numeric box (in section_a) to the regular text box (in section_b), then, hide "section_a" and show "section_b".

In your case, you can change the format of the regular textbox to anything you like.

This certainly involves more work for users.

The good thing about this is, when a new implementation is made available to address the issue in the unknown future, I shouldn't need to go back to any of the old codes to remove their suggested workaround.

I hope this helps.

Nim