Forum Discussion

jeff_stroh's avatar
jeff_stroh
Creator II
5 months ago

Tech Docs - 'Zoom'

We have some users who want larger text in their Tech Docs, so I'm looking for a way to dynamically apply CSS rules on a button.

When I go into the developer console, use the element selector to pick the editor pane and then run the following, it's doing what I want (in this case setting the editorContentNode to 150% width.

[embed:dc8ab71f-3b98-42d9-b0f6-e21e02a0f8e2:e5e35de4-1871-4c0d-b24f-cb65c9f8189f:type=text&text=const%20nodes%20%3D%20document.querySelectorAll%28%27.editorContentNode%27%29%3B%0D%0Anodes.forEach%28node%20%3D%3E%20%7B%0D%0A%20%20node.style.width%20%3D%20%27150%25%27%3B%0D%0A%7D%29%3B]

But, if I apply that in a button either in the tdf editor toolbar or on the itemview toolbar, it does nothing.

I'm assuming this is based on the structure of the DOM inside Aras.  Any tips or tricks on sorting out how in the heck to select this?  I'd prefer it from the tdf editor toolbar to keep all the tools in one spot.

 

Thanks in advance!

1 Reply

  • Nevermind, I was able to sort it out:

    [embed:dc8ab71f-3b98-42d9-b0f6-e21e02a0f8e2:19c4eee2-1e81-47f9-aa4b-0b9a79d4e1c2:type=text&text=const%20editorDoc%20%3D%20techDocHtmlEditor_iframe.contentDocument%3B%0D%0A%0D%0Aconst%20nodes%20%3D%20editorDoc.contentDocument.querySelectorAll%28%27.editorContentNode%27%29%3B%0D%0A%0D%0A%2F%2Fadjust%20editor%20width%0D%0Anodes.forEach%28node%20%3D%3E%20%7B%0D%0A%20%20node.style.width%20%3D%20%27150%25%27%3B%0D%0A%7D%29%3B]