Scenario
I click on an element in the CSS styles tab of Chrome dev tools and then click the + symbol to add an instance of the selected element so I can make independent changes to it, this action creates an instance of the selected element (image 1).
Problem
When I click in-between the curly braces of the new instance of the element in the styles tab it then disappears (image 2).
Does anyone know why this his happening and how to prevent it? This doesn't happen when I follow the same procedure in FireFox and I've not encountered it before. It is also happening on every element.
Thanks,
This problem stopped happening when I updated my version of SASS.
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
I would really love to see all my live css changes summarized somewhere in Chrome browser, there are a couple of question about this at SO, but nothing works for me. Especially this particular answers which seems to be the most straightforward way to achieve what I need.
Export CSS changes from inspector (webkit, firebug, etc)
I've changed a few css properties, but don't see anything in this tab:
FYI - I'm using webpack dev server to serve this page if that's relevant
Here is how I make my changes appear:
Once you select the element to modify click the + sign under the styles tab.
The new inspector style sheet appears under the changes tab in the left hand column. The right hand pane includes your new changes.
If you made css changes in the Inspect > Elements pane, and didn't happen to use the method of https://stackoverflow.com/a/69634283/6200445 , then one way to see the changes is to do a git compare of the DOM structures. Its not a perfect solution, but you can compare the dom structures (via edit HTML on ) in two commits, comparing some baseline (commit) with your live css changes (second commit)
In my case the git compare had a few irrelevant changes but it caught all my css changes.
There is hidden link on a page. It appears only when manually mouse hovered over it.
But as a part of automation, I tried to use the following keywords and not fruitful result:
Mouse Over <XPATH to the link>
or
Click <XPATH to the link>
I got the below error :
ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with
What browser are you using? If it's IE, you will not be able to solve this problem due to how it handles mouse events - https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver
An alternative may be to use the 'Simulate' Keyword or execute it using javascript, my preference is to use the keyboard and take advantage of tab ordering.
This shouldn't be an issue in other browsers unless your locators are poor.
I have faced the same issue(when the element is at the bottom of the page and we need to scroll to find that element). I have come up with below steps.
1.Mouse hover over the target element(or parent)which ever the driver can determine the element.(Ex: Mouse Over > Xpath of element)
You can add sleep or wait to find the element in between 1 & 2.
2.Now click on the Target element.(Ex: Click Element > Xpath of target element)
It should work in chrome.(I haven't tried in IE or FF).
Hopefully this might help you
I'm working with the Firefox browser.
As suggested by the #supraja reddy , first I mousehovered on the parent and then on the final element. I worked.
Below the code snippet :
Mouse Over id=${parent_id}
Mouse Over id=${child_id}
Click Link id=${child_id}
I have encountered an annoying problem while trying to debug some CSS in Chrome. I am rather new to CSS, and using Chrome's "Computed" window in the CSS developer tools has been very handy in figuring out where CSS properties I'm trying to assign are being overwritten later down the chain. (Please feel free to correct any incorrect terminology so I can be on the same page).
Here's an example of how it helped me successfully change the color for an active jQuery UI Tab:
http://1drv.ms/1yJzyec (don't have enough rep points yet to post a picture. This goes to my OneDrive.)
I need to use this approach to figure out what's going wrong with my CSS for a hovered or focused element. Here's the problem: as soon as I click into Chrome's developer tools to see the chain of inheritance for a specified element, it is no longer hovered/focused because I've clicked into the developer tools, preventing me from seeing the inheritance.
Are there any other tools out there that can help me dissect an HTML element's CSS inheritance chain in real-time?
Thanks!
Using Chrome developer tools, you can force the element to be in the hovered state.
Click on the Toggle Element State icon (dash-bordered box with pointer) to show this.
This is a strange issue...
getNode()
Trying to add a tinyMCE button (inside WordPress) that opens a TinyMCEPopup window.
There I need to check the current NODE where the user has clicked inside the text -- specifically if they have clicked inside a LI node/tag.
I'm using:
tinyMCE.activeEditor.selection.getNode().nodeName
Works well inside, FireFox, Chrome etc, but NOT in IE.
In IE I always get the node "DIV" and...
In IE it actually checks a completely different portion of the markup, like... it seems to get the parent node of the whole TinyMCE editor markup instead of where the user has clicked.
That's why it always returns a DIV.
In IE, when I click inside a LI element (in the visual view of the editor), it puts a strange frame around, which does not put my cursor inside that list element, unless I double-click the frame. See this screenshot here: http://screencast.com/t/9HVjMUvy
getContent()
Does also NOT seem to work in IE...
tinyMCE.activeEditor.selection.getContent()
(IE returns always "empty", nothing selected, while all other browsers give correctly selected portion of the text)
Any ideas how to fix these?
Much appreciated!
Concerning the resize handles you may get rid of them using the following tinymce configuration paramter
object_resizing : false