Grid widget editable row popup

[krishnakomal123]

Hi,

I am using external fonts and trying to apply those on thingworx widgets.I am using font-face css syntax and able to import them.I have succesfully applied the font to all the elements of grid expect the popup that shows up when pencil icon is clicked on each row to edit the values of each row.

The problem arises when trying to inspect the popup. The popup vanishes when inspect is tried to know class and part details. Please find the attached screenshot with popup on the right and the popup is part of the Grid widget. Help me with css code to update font for this popup and verify the changes using inspect feature of browser.

[TonyZhang · Accepted solution]

Hi @krishnakomal123,

Apart from configuring styles through Style Properties UI, I didn't find a good way to apply styles to grid edit popup through custom css.

Based on my limited tests, it appears that the popup content and the style are rendered with JS at runtime and will override the style defined in custom css. 

I guess you need to raise an enhancement idea in community to have the font family attribute exposed for grid-edit-cells in Style Properties with certain fonts available as per your requirements (or allow typing instead of selecting from drop down)

For inspecting the ptcs-grid-edit-cells element, you can go to sources tab in the DevTool and add an event listener breakpoints (control - blur)

*The blur event fires when an element has lost focus

Click resume script execution until the popup appears

Go back to elements tab to inspect the popup the same as you would for other elements (The popup will not disappear as it is paused in debugger)

Best,

[krishnakomal123]

With the help of Event Listener Breakpoints, I could find the class and part details and able to apply external fonts. Thank you