inspecting things that disappear upon mouse/keyboard activity

1
Hi I have to style the dijit.form.TimeTextBox. When you click on it for its popup, the popup appears, however, it is not easy to inspect this thing to get at the classname. What is the general approach that one can use to get at these widgets with their disappearing acts? Thankyou
asked
2 answers
1

Typically you can use the developer tools (F12) in Chrome or Firefox to accomplish this. Make sure you open them in a separate window. Sometimes you need to navigate to the particular DOM element in the developer tools, then alt+tab to the browser, reveal the pop-up, and alt-tab back to the developer tools. That usually let's you inspect elements like this.

In this case with the TimePicker, it looks like a large number of classes are added and removed when you (a) hover over the input and (b) open the drop-down. You might be able to get what you need from there.

It looks like the actual drop-down is a dijit TimePicker widget, encapsulated by the dijit TimeTextBox widget. You may gain some additional insight by looking at the code for these widgets, or just by extracting the mendix widget mpk archive (it's a zip file).

answered
1

The Chrome developer tools also allow you to force the focus or hover state. The styles tab of the inspecter has a little rectangle icon, if you open it, you can force states like focus and hover. When running the inspect in a separate window, this can help to get the info you need.

answered