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
jquery-ui jquery-widgets
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
add a comment |
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
jquery-ui jquery-widgets
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
Your fiddle does not appear to have the jQuery UI CSS Resource. Hence none of the icons would load.
– Twisty
Nov 15 '18 at 18:27
add a comment |
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
jquery-ui jquery-widgets
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
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
jquery-ui jquery-widgets
jquery-ui jquery-widgets
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
asked Nov 15 '18 at 16:50
ApekshaApeksha
303418
303418
Your fiddle does not appear to have the jQuery UI CSS Resource. Hence none of the icons would load.
– Twisty
Nov 15 '18 at 18:27
add a comment |
Your fiddle does not appear to have the jQuery UI CSS Resource. Hence none of the icons would load.
– Twisty
Nov 15 '18 at 18:27
Your fiddle does not appear to have the jQuery UI CSS Resource. Hence none of the icons would load.
– Twisty
Nov 15 '18 at 18:27
Your fiddle does not appear to have the jQuery UI CSS Resource. Hence none of the icons would load.
– Twisty
Nov 15 '18 at 18:27
add a comment |
1 Answer
1
active
oldest
votes
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>
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324270%2fautocomplete-combobox-button-not-rendered-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
add a comment |
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>
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
add a comment |
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>
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
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>
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
answered Nov 15 '18 at 18:29
TwistyTwisty
14.3k11534
14.3k11534
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53324270%2fautocomplete-combobox-button-not-rendered-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your fiddle does not appear to have the jQuery UI CSS Resource. Hence none of the icons would load.
– Twisty
Nov 15 '18 at 18:27