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.
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.
Related
Recently, I have noticed that Google Chrome's JavaScript console autocompletes previously inputted commands. For example:
I want to remove this feature because the autocomplete displays variables that may not exist. Is there a way to remove this feature?
Yes. A lot of people found it annoying, so they added a setting to disable it.
First, enter the DevTools settings from the menu button in the top right corner.
Then, in the "General" section, disable "Autocomplete from history".
I have an autocomplete dropdown box for city names as,
When i try to inspect one of the option elements using right click and Inspect Element, the dropdown menu disappears and inspect element takes me to the original page's dom.
How can one inspect dropdown menus using firebug inspect element?
With the suggestions dropdown visible and DevTools opened, press F8 and switch to the DevTools. You will immediately break at the JS blur handler for the field, so the dropdown will not be removed, thus you'll be able to inspect its DOM.
Edit HTML right click menu Chrome Dev Tool
In Chrome Dev Tool you can Right Click on the input where you type the adress, Scroll down to "Break On..." and select subtree modifications.
Go back to your input and start typing. It should Pause the app leaving you with the open suggestions dropdown.
Can't speak for Firefox, but in Chrome developer tools you can trigger a state on an element manually by right-clicking on the element in the developer window, and choosing the appropriate item (i.e. ':hover').
Inspect the dropdown/input element and remove the "Blur" event from the "Event Listeners"
When I have the JavaScript console open in Chrome, I am often unable to use forms, fill in inputs, or click buttons in the browser because Chrome is highlighting HTML elements for me.
Sometimes, it stops, but I don't know what I am doing to make it stop.
Is there a keyboard shortcut or something to make Chrome not highlight HTML elements and let me use the form on the page with the console open?
This irritation can be avoided by using a different keyboard shortcut. cmd+shift+c makes chrome inspect elements on the page, even after you switch to the Javascript console. cmd+option+j opens the console and lets you go on behaving like a user.
I am trying to inspect the div element that appears for Tipsy hover-overs on this page in order to change the width of the popup.
https://dl.dropbox.com/u/1531353/Misc/Docudocker/setups/tipsyCrashingApplication/force-html.html
However, when I press Shift+Ctrl+C, and then move my mouse to the Developer Elements panel, the Tipsy hover-over disappears, so I can't examine it any more.
How do I examine an element that only appears upon a hover-over effect in Chrome Web Developer?
I am using Win 7. I used firebug & it showed that tooltips were using the tipsy.css try to navigate to your tipsy css & change the width attrib though i couldnt get the bottom part of the tooltip in right shape. Hope it helps
i am having some problems with the TinyMCE (V3.4.7) and JqueryUI (V1.8.14) Dialog
the following Fiddler link shows my example purfectly here
What i am trying to do is open a JqueryUI Dialog box with a TinyMCE WYSIWYG Editor in it.
the first time it displays properly. but if you click close and then reopen the box it will not show the Editor but just the TextArea.
Any help would be good. Thanks
Update
I did find out a solution that works for me, i have put up the working code here
What i am doing is check to see if the dialog has been opened before and if so just open it, then in the Open Function i test to see if the box contains an element with id_parent
if it does then this will be the editor (so do nothing) otherwise just init as usual.
it seems there is a problem with the JQuery Plug in as it does not remove the elements when you call tinyMCE.execCommand('mceRemoveControl',false,'editor_id') and when you re-add the editor it attaches to the first box available.
Problem here is that you need to shut down tinymce correctly in order to open an editor with the same id.
Use:
ed.execCommand('mceRemoveControl', false, 'editor_id');// editor_id equals the id of your textarea