Increase size of workarea on SPFX Workbench.aspx

%3CLINGO-SUB%20id%3D%22lingo-sub-36387%22%20slang%3D%22en-US%22%3EIncrease%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-36387%22%20slang%3D%22en-US%22%3E%3CP%3ECan%20I%20or%26nbsp%3B%20How%20do%20I%20make%20the%20workspace%20bigger%20on%20Workbench.aspx%20(the%20spfx%20workbench)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-36451%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-36451%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20%22src%22%20directory%20of%20porject%20there%20is%20%22.scss%22%20file.%20You%20can%20add%20styles%20here%2C%20whether%20you%20want%20to%20add%20new%20or%20override%20existing%20styles.%20In%20%22helloWorld%22%20sample%20project%20%22.scss%22%26nbsp%3B%20file%20path%20is%20probably%20%22helloworld-webpart%5Csrc%5Cwebparts%5ChelloWorldHelloWorld.module.scss%22.%3C%2FP%3E%3CP%3EI%20hope%20this%20will%20help.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1951650%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1951650%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F6996%22%20target%3D%22_blank%22%3E%40Waqar%20Muneer%3C%2FA%3E%26nbsp%3BThis%20doesn't%20make%20the%20workbench%20placeholder%20bigger%20it%20only%20makes%20the%20container%20bigger%20using%20scss.%20If%20you%20make%20the%20container%20bigger%20than%20the%20workbench%20it%20the%20sides%20of%20the%20container%20will%20disappear%2C%20which%20is%20no%20good.%20If%20you%20know%20of%20a%20way%20to%20make%20the%20workbench%20place%20holder%20bigger%20then%20please%20do%20share.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1951819%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1951819%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F142793%22%20target%3D%22_blank%22%3E%40Cardinal_Night%3C%2FA%3E%26nbsp%3Bcheck%20out%20this%20web%20part%2C%20hope%20it%20can%20help%20you.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Fjs-workbench-customizer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Fjs-workbench-customizer%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20can%20just%20add%20it%20to%20your%20workbench%20page%20and%20carry%20on%20working.%20It%20will%20force%20the%20workbench%20to%20the%20same%20size%20of%20a%20normal%20SharePoint%20page%2C%20and%20you%20can%20also%20edit%20the%20page%20and%20change%20the%20web%20part%20settings%20to%20make%20it%20full%20width.%20It's%20not%20the%20perfect%20solution%2C%20but%20hope%20it%20can%20help%20you%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1951835%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1951835%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9907%22%20target%3D%22_blank%22%3E%40Joel%20Rodrigues%3C%2FA%3E%26nbsp%3BIs%20it%20a%20case%20of%20simply%20copying%20code%20into%20the%20root%20webparts%20.ts%20file%3F%3C%2FP%3E%3CP%3EIf%20it's%20too%20complicated%20I'll%20probably%20struggle!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1951875%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1951875%22%20slang%3D%22en-US%22%3E%3CP%3ENo%2C%20just%20download%20the%20code%20from%20the%20repository%20that%20I%20linked.%26nbsp%3B%3C%2FP%3E%0A%3CP%3ERun%3A%20npm%20install%2C%20gulp%20bundle%20--ship%2C%20gulp%20package-solution%20--ship.%26nbsp%3B%3C%2FP%3E%0A%3CP%3EUpload%20the%20package%20to%20the%20app%20catalog%20and%20add%20the%20web%20part%20to%20your%20workbench%20page%20%3A)%3C%2Fimg%3E%20The%20web%20part%20will%20be%20on%20the%20page%20together%20with%20your%20solution%2C%20but%20it's%20completely%20isolated%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELet%20me%20know%20if%20you%20have%20any%20questions.%20If%20the%20instructions%20on%20the%20readme%20file%20of%20the%20solution%20are%20not%20clear%2C%20I%20would%20appreciate%20feedback%20so%20I%20can%20update%20them%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1952002%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1952002%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9907%22%20target%3D%22_blank%22%3E%40Joel%20Rodrigues%3C%2FA%3E%26nbsp%3BGetting%20error%20when%20bundling%3A%3C%2FP%3E%3CP%3EError%3A%20JSON%20validation%20failed%3A%3CBR%20%2F%3EC%3A%5CUsers%5Cme%5Cdeveloper%5Csp-dev-fx-webparts%5Csamples%5Cjs-workbench-customizer%5Cconfig%5Cpackage-solution.json%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EError%3A%20%23%2Fsolution%3CBR%20%2F%3EAdditional%20properties%20not%20allowed%3A%20developer%20at%20....%20(loads%20more%20locations%20in%20node%20modules%20here).%3C%2FP%3E%3CP%3Edeveloper%20is%20the%20folder%20I%20keep%20all%20projects%20in%20btw%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1964432%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1964432%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EI%20have%20added%20the%20following%20styles%20in%20my%26nbsp%3B%3C%2FSPAN%3Emodule.scss%3CSPAN%3E%26nbsp%3Bfile%20and%20it%20worked%20perfectly%20for%20me.%3C%2FSPAN%3E%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22hljs-selector-pseudo%22%3E%3Aglobal%3C%2FSPAN%3E%20%7B%0A%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-selector-id%22%3E%23workbenchPageContent%3C%2FSPAN%3E%2C%20%3CSPAN%20class%3D%22hljs-selector-class%22%3E.CanvasComponent%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-selector-class%22%3E.LCS%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-selector-class%22%3E.CanvasZone%3C%2FSPAN%3E%20%7B%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22hljs-attribute%22%3Emax-width%3C%2FSPAN%3E%3A%20%3CSPAN%20class%3D%22hljs-number%22%3E100%25%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-meta%22%3E!important%3C%2FSPAN%3E%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%7D%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1985431%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20size%20of%20workarea%20on%20SPFX%20Workbench.aspx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1985431%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F893995%22%20target%3D%22_blank%22%3E%40mujassir%3C%2FA%3E%26nbsp%3BWhere%20do%20you%20add%20it%20in%20the%20scss%20file%3F%20Encompassing%20all%20other%20elements%3F%20or%20just%20at%20the%20top%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt's%20not%20working%20for%20me%2C%20it%20doesn't%20accept%20%3Aglobal%20for%20a%20start%2C%20if%20I%20change%20it%20to%20.global%20it%20does%2C%20but%20still%2C%20doesn't%20work%20for%20me.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EUpdate%3A%20keeping%20the%20code%20as%20Mujassir%20suggests%2C%20DOES%20work%20on%20spfx.%20This%20is%20a%20much%20quicker%20solution.%20Well%20done.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Frequent Contributor

Can I or  How do I make the workspace bigger on Workbench.aspx (the spfx workbench)

8 Replies

In "src" directory of porject there is ".scss" file. You can add styles here, whether you want to add new or override existing styles. In "helloWorld" sample project ".scss"  file path is probably "helloworld-webpart\src\webparts\helloWorldHelloWorld.module.scss".

I hope this will help.

 

 

@Waqar Muneer This doesn't make the workbench placeholder bigger it only makes the container bigger using scss. If you make the container bigger than the workbench it the sides of the container will disappear, which is no good. If you know of a way to make the workbench place holder bigger then please do share.

@Cardinal_Night check out this web part, hope it can help you.
https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/js-workbench-customizer

 

You can just add it to your workbench page and carry on working. It will force the workbench to the same size of a normal SharePoint page, and you can also edit the page and change the web part settings to make it full width. It's not the perfect solution, but hope it can help you

@Joel Rodrigues Is it a case of simply copying code into the root webparts .ts file?

If it's too complicated I'll probably struggle!

 

No, just download the code from the repository that I linked. 

Run: npm install, gulp bundle --ship, gulp package-solution --ship. 

Upload the package to the app catalog and add the web part to your workbench page :) The web part will be on the page together with your solution, but it's completely isolated

 

Let me know if you have any questions. If the instructions on the readme file of the solution are not clear, I would appreciate feedback so I can update them 

@Joel Rodrigues Getting error when bundling:

Error: JSON validation failed:
C:\Users\me\developer\sp-dev-fx-webparts\samples\js-workbench-customizer\config\package-solution.json

 

Error: #/solution
Additional properties not allowed: developer at .... (loads more locations in node modules here).

developer is the folder I keep all projects in btw

I have added the following styles in my module.scss file and it worked perfectly for me.

:global {
      #workbenchPageContent, .CanvasComponent.LCS .CanvasZone {
        max-width: 100% !important;
      }
    
    }

@mujassir Where do you add it in the scss file? Encompassing all other elements? or just at the top?

 

It's not working for me, it doesn't accept :global for a start, if I change it to .global it does, but still, doesn't work for me.

 

Update: keeping the code as Mujassir suggests, DOES work on spfx. This is a much quicker solution. Well done.