NumbericTextBox looks disabled in IE

[Charlie Strout]

I have a page where I set the value of the numerictextbox = '' (i.e. it is empty).

In Internet Explore, when someone clicks on the textbox, the cursor doesn't appear in it.  The user can still enter numbers into the textbox.  Once numbers are in the textbox it works fine.

The numerictextbox works just fine in Chrome and Firefox.

Does anyone have a suggestion on the cause of this issue or a fix.  Thanks.

Charlie

[Petur Subev]

Hello Charlie,

Why do you set the value to empty string, why don't you set it to null. 

http://jsbin.com/axemut/3/edit


When set to null I am not able to reproduce such behavior, could you please check the fiddle and let me know if this is what you are trying to achieve?

Kind Regards,
Petur Subev
Telerik

[Charlie Strout]

Hi,

Thanks for looking at this.  I tried your fiddler page but I got an error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC EA 2; BRI/2; InfoPath.3; MS-RTC LM 8)
Timestamp: Mon, 17 Jun 2013 16:17:50 UTC


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://static.jsbin.com/js/prod/jsbin-3.3.0.min.js


However, I was able to get some more details on this.  It looks like a css issue.

The code I have now is:  

@Html.TextBoxFor(m => m.RawLaborGSORow.RevenueBudgetImpact, new { style="width:100px;text-align:right;"})

If I change this to 

@Html.TextBoxFor(m => m.RawLaborGSORow.RevenueBudgetImpact, new { style="width:100px;text-align:left;"})

It works fine.  This suggests that the cursor is there but just hidden.

So maybe my questions, how do I do a 100px wide textbox without spinners.  Currently I am using the following to create the textbox.

$("#RawLaborGSORow_RevenueBudgetImpact").kendoNumericTextBox({
            format: "n",
            decimals: 2,
            spinners: false,
            change: calculateValues
        });

Thank you for your assistance.

[Petur Subev]

Hello Charlie,

Indeed it looks like a glitch in IE8

http://stackoverflow.com/questions/3158501/contenteditable-div-with-text-align-right-in-ie8-doesnt-show-caret

Adding the style seems to deal with it.

http://jsbin.com/axemut/7/edit

Kind Regards,
Petur Subev
Telerik

[Charlie Strout]

Thanks.  I was able to fix this by adding the following style to the page:

.k-numeric-wrap.k-expand-padding
        {
            padding:1px;
        }

And adding a padding-right:1px to the textbox.

Thanks for your help.