In SPFx, I make webparts that read content from a source like custom lists and then draws it out with a title and content. However sometimes there is no content, and if thats the case, I would like to hide the whole web part.

Now it's pretty easy for me to hide the title, or set display:none on the webpart root class, but the problem is it still leaves some margin on top and bottom of the containing canvas zone.

What I would like to be able to do is then somehow declare the webpart as hidden, which SP should detect as the canvas zone being either empty or has only webparts that has been declared as hidden, which then collapses/hides the canvas zone itself.

Does anyone know is this kind of functionality exists to how to achieve something like this?


1 Answer 1


Try hiding the parent node if the web part is empty:


But to be able to edit its properties, first, ensure it is rendering in the 'read' mode via displayMode field:

if (this.displayMode == DisplayMode.Read) { // and empty

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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