I'm using the Modern Script Editor Webpart from pnp/sp-dev-fx-webparts GitHub. Installation and deployment all went fine and I can also execute JavaScript code on my sample modern teamsite.

Here's an example:

<script type="text/javascript">
let elem = document.querySelectorAll("[class='CanvasComponentWrapper']");
elem[0].style.maxWidth = '90%';

This code widens the canvas and it works as intended. However when I leave the homepage, going into Documents for exmaple, and navigate back to Home the script is not applied any longer. On the other hand, if I click on Home once more in the Quick Launch nav it will reload the script.

So the behavior is: After leaving and returning to the page hosting the webpart/script the script is not reapplied unless the page was reloaded twice.

Any idea why that could be?

enter image description here


However, I noticed that

  • Which version are you running? I added a fix in April last year to re-trigger on smart navigation scenarios but might be it only works if you reference a script and not inline ones. Jan 28 '21 at 13:02
  • Thanks for your comment. I had installed the latest version I added a .gif to demonstrate what's happening. Basically the CanvasComponent gets resized to 33% max-width. That works. However, if I clicka nav link to move into another library and go back home the script is no longer applied and the width is the default. Any idea? Thanks. Jan 29 '21 at 13:52
  • I don't have repro, and seems to work as intented. I used the below which sets width of the header of a modern page. Alert is there to show it triggers on each navigation. <script type="text/javascript"> var elem = document.querySelectorAll("[class='webPartContainer']"); elem[0].style.maxWidth = '80%'; alert('a'); </script> Jan 29 '21 at 18:02
  • Thanks for testing. So alert() always works even when coming back from another navigation node. However, applied styles don't like described. Can you test with hiding the site title? <script type="text/javascript"> let elem = document.querySelectorAll("span[role*='heading']"); elem[0].style.display = 'none'; </script> That also doesn't work but it should be easier for you to test. Thanks. Jan 30 '21 at 12:46
  • Works fine, but you have to replace "let" with "var", as let is not a JavaScript keyword. (Which I did the first time around as well.) Feb 1 '21 at 7:29

Replace let with var to have compliant JavaScript and it should work just fine.

  • That was it! Thanks and I apologize. Didn`t occur to me that this could have been the problem. Feb 1 '21 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.