Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > NumericTextBox > calling disable() in a javascript (client-side) causes display issue

• Nim

  Posted on Sep 28, 2011 (permalink)

  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 Dimo

  Posted on Oct 4, 2011 (permalink)

  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

  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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Nim

  Posted on Oct 11, 2011 (permalink)

  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

  Attached files

  • screen-shot-1.PNG
  • screen-shot-2.PNG

• Dimo Dimo

  Posted on Oct 12, 2011 (permalink)

  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

  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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Nim

  Posted on Nov 3, 2011 (permalink)

  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

  Posted on Nov 30, 2011 (permalink)

  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 Dimo

  Posted on Dec 1, 2011 (permalink)

  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

  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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• jenbagaraman j

  Posted on Dec 1, 2011 (permalink)

  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. 

  Attached files

  • NumericTextBoxError.jpeg

• Dimo Dimo

  Posted on Dec 1, 2011 (permalink)

  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

  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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• jenbagaraman j

  Posted on Dec 2, 2011 (permalink)

  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 Dimo

  Posted on Dec 2, 2011 (permalink)

  Hello Jenbagaraman,
  
  Currently this is not possible in Internet Explorer, as explained in my previous replies.
  
  Greetings,
  Dimo
  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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Nim

  Posted on Dec 2, 2011 (permalink)

  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
  

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > NumericTextBox > calling disable() in a javascript (client-side) causes display issue