0

I am trying to use jquery-ui's autocomplete widget (1.12) and it looks weird.

I found this question that has some advice about style, version unknown.

Normally I would open the page in chrome, open the debugger, click on the button that says "Select an element in the page to inspect it (flower up-arrow C)", then click on the element to inspect, and I'd see all the styles.

However, when I click on the debugger select, the autocomplete goes away. If I type so the autocomplete comes up, the debugger select goes away. Same behavior with the keyboard shortcuts.

How do you inspect the styles of an jquery-ui autocomplete result window in chrome?

EDIT: I never was able to inspect, but I did get .ui-menu and .ui-menu-item to work, from this answer.

dfrankow
  • 20,191
  • 41
  • 152
  • 214
  • Does this answer your question? https://stackoverflow.com/a/17293612/14518353 –  Sep 15 '21 at 23:07
  • I don't think so? Not sure how to console log the style on an autocomplete box, especially when it will disappear when I start typing in the console. – dfrankow Sep 15 '21 at 23:09
  • I dont mean console.log(), but I thought you were looking to find the source code of the extension. If so, that's where it would be –  Sep 15 '21 at 23:11

1 Answers1

0

You can just search the for ui-widget or ui-autocomplete in the Elements Tab of the dev tools. You should be able to find a - remove the "display: none" - this should do it.

Should look something like this

ThatsWhy
  • 26
  • 2
  • Oh interesting. I can search for `ui-` in the Elements tab, and I see the style, which is helpful. I cannot modify it, though. It's in a text window, and when I double-click on it, nothing happens. Thoughts? – dfrankow Sep 16 '21 at 14:01