NumbericTextBox looks disabled in IE

5 posts, 0 answers
  1. Charlie Strout
    Charlie Strout avatar
    4 posts
    Member since:
    Feb 2003

    Posted 13 Jun 2013 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Charlie Strout
    Charlie Strout avatar
    4 posts
    Member since:
    Feb 2003

    Posted 17 Jun 2013 Link to this post

    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.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Charlie Strout
    Charlie Strout avatar
    4 posts
    Member since:
    Feb 2003

    Posted 19 Jun 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready