Search code examples
jquery-uijquery-widgets

Autocomplete combobox button not rendered properly

I am trying to make this widget work in my application - http://jqueryui.com/autocomplete/#combobox

I am only trying to make the example work as is. I did have to change the button widget initialization to match the latest version of jQuery, but haven't changed anything else. This is the part I removed:

.button({
    icons: {
        primary: "ui-icon-triangle-1-s"
    },
    text: false
})

It was replaced with:

.button({
       icon: "ui-icon-triangle-1-s",
       showLabel: false
})

I don't understand why the "Show all" button is not visible. It is there, with a width of 0. On changing the width manually, the button icon is not visible. What am I missing?

Here is a fiddle: Autocomplete Combobox

Solution

  • Add the proper CSS:

    https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

    And then the code you supplied works: https://jsfiddle.net/Twisty/dL2uqwem/

    Or in your code header:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>