Why are the jQuery UI Spinner arrow buttons not showing?

user_5930616 0
Viewed 736

After implementing the simplest boilerplate version of the jQuery UI Spinner Widget, the up- and down-arrow-buttons were not showing. Clicking the spot where they should appear caused the Spinner events to fire and the number to increment/decrement, but no buttons were visible.

I found some related (unhelpful) questions on SO (more here and less here) and one on the jQuery Forums (here). That last thread mentioned possible Bootstrap conflicts.

I am using both Bootstrap and jQuery (UI) in my project.

Sample HTML

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

and JavaScript

$( "#spinner" ).spinner({
  min: 0,
  step: 100000,
});

were nothing fancy, even though there was some custom CSS going on besides that, obviously.

Attempting to style using jQuery UI's provided CSS classes did not help. Doing something like

.ui-spinner-button {
  color: white !important;
  background: black;
}

did turn the buttons' background black, but the arrows were still not visible.

bootstrap-4 jquery-ui css html jquery
1 Answers

TL;DR

If you encounter this problem and you are using both Bootstrap (v4) and jQuery (v1.12), try switching the order, in which their JavaScript (not CSS, strange, as it may seem) is loaded, specifically have jQuery be loaded after Bootstrap.

Caveats

This may or may not cause issues where then jQuery interferes with Bootstrap functionality. Although, so far, I had no issues like this.

Why?

After some digging and inspecting in the browser, I found that there was a style being applied to the button elements (<a>-tags) by Bootstrap, namely the following (coming from _reboot.scss):

a:not([href]) {
    color: inherit;
    text-decoration: none;
}

This seemed to mess with my attempts to force a different CSS onto the buttons.

The thread poster in the jQuery Forum mentioned above also found Bootstrap to be the problem, so I tried messing with the import orders. Strangely enough, having the jQuery UI CSS load after the Bootstrap CSS changed nothing. When I switched the JavaScript imports it worked (CSS import order can stay the same).

Why that is the case, I hope someone else can tell. I just hope, this helps someone pulling their hair, as I did.

user_59306160
Related