0

I am looking at this jQuery UI Spinner example https://jqueryui.com/spinner/ and I notice that its default width of the input area is much bigger than the actual string inside. How to configure the widget so its width gets automatically adjusted and I can see just the text inside the input box, without any whitespaces before it?

Example:

Instead of this:

[   10]

I want to see just this:

[10]

But when the text grows further, it should grow to fit it:

[100]

Note: I am familiar with HTML <input type="text"> size attribute, which lets me specify a hardcoded size (in chars) of the input, but I don't see such a setting here: https://api.jqueryui.com/spinner/ . Is it because the widgets inherit all properties of the input widget transparently or this can be done differently? I am willing to accept this approach as the particular workaround if the goal stated in the question can't be achieved for some reason.

dangchithao
  • 613
  • 2
  • 8
  • 24

1 Answers1

1

I found a related answer. So I mixed it with https://jqueryui.com/spinner/. We can detect the value changing by _format event and call the resizeInput method inside it:

$.widget( "ui.pcntspinner", $.ui.spinner, {
    _format: function( value ) { intputElem.each(resizeInput); return value; },
});

And it worked. Try it yourself at JSfiddle.

Jared Chu
  • 2,757
  • 4
  • 27
  • 38