Decrease Spinner size

Question

Decrease Spinner size

Navigation

#1 by (1 votes)

0

I'm trying to use the jquery Spinner, which by default has 8 fields, and is too large for my purpose, which in this case would be 2 fields. I have already looked at your documentation, but the most I could do was to decrease its font, as shown below:

<input readonly id="spinner" name="value">

<style>
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-size: small;
    maxlength: 3;
    outline: 1px; /* add this bit */
    border: 1px inset;
}
</style>

Is it possible to do this customization?

html jquery css

asked by anonymous 24.04.2017 / 01:42

1 answer

Problem with cookies in php Calculate total store revenue in Java

score 1 · Accepted Answer

Yes. You can do something like this:

<input id="spinner" name="value" max="99"></input>

With a max="99" you limit 99 as many as possible, and so only go up to two digits. You can also use min="0" , if you do not want negative numbers. Then just decrease the width of the input.

Follow Example:

$(function() {
  var spinner = $("#spinner").spinner();

  $("button").button();
});

#spinner {
  width: 20px;
}

<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<p>
  <input id="spinner" name="value" min="0" max="99">
</p>