CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-spinner
jce
jce

Reputation: 143

jQuery UI Spinner + Custom Theme - Buttons Under Input

I am trying to apply a theme-roller theme to a page with jquery-ui spinners. Once the theme is applied the buttons for the spinner are mostly hidden under the input.

Here is the entire page:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.min.css">
    <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <script>
        $(function ()
        {
            $(".spinner").spinner().width(120);
        });
    </script>
</head>
<body>
    <input id="spin" class="spinner" type="text">
</body>
</html>

(Apologies for not using jfiddle. You have to download the theme to see the problem.) I didn't change the theme in any way. There is an example of the spinner working with the theme here. You can also download the theme from that page.

I have found a few cases of people complaining about the same problem but no solution. I tried different versions of jquery (3, 2 & 1). You can remove the .width(120) and the type="text" from the element. The example jquery provides doesn't use those.

Any help would be appreciated!

Upvotes: 0

Views: 495

Answers (0)

Related Questions