HOW TO: Hide web part when it's empty

[smithme]

I have a web part I wrote that I want to hide when there is no content in it (like the News web part). How do I do that?

[#2]

@smithme There's usually an option to hide the web part if there's nothing to show. It's definitely on 'News', although maybe not on every web part.

[#3]

Sorry, I wasn't more clear. I am writing a custom webpart. I want it to take up zero vertical space on the page when it is empty. How do I programmatically, tell my webpart to display:none;

[#4]

I would add a CSS class of hidden that only has display:none and add that class to whatever element I want to hide if the webpart is empty.

[#5]

@Fredrik_Fjllstrm Can you post an example of how to do this?  I'm having the same issue. 

Thanks so much!

[#6]

@mcads I wondered that exact question myself and asked Microsoft Copilot. Here's what it said:

Certainly! To conditionally hide an element within a SharePoint Online page using CSS, you can create a custom CSS class with the property display: none. Then, apply this class to the desired element based on specific conditions (such as whether a web part is empty). Here’s how you can achieve this:

1. Create a Custom CSS Class:

   • You can define a CSS class that sets the display property to none. This class will be used to hide the element.
   • For example, let’s create a class called .custom-hidden:

     .custom-hidden {
         display: none;
     }

2. Identify the Element to Hide:

   • Determine which element you want to hide. It could be a specific div, section, or any other HTML element within your SharePoint page.

3. Apply the Custom Class Conditionally:

   • Depending on your scenario (e.g., if a web part is empty), you can add the .custom-hidden class to the element.
   • You can do this dynamically using JavaScript or directly in your HTML markup.

4. Example Usage:

   • Let’s say you want to hide a specific div with the ID myElement when a web part is empty:

     <div id="myElement" class="custom-hidden">
         <!-- Content of the element -->
     </div>
     

   • If the web part is empty, the myElement div will be hidden due to the applied .custom-hidden class.

5. Content Editor Web Part (Classic):

   • If you’re working with classic pages, you can use a Content Editor Web Part to inject your custom CSS directly into the page.
   • Add the CSS snippet within the Content Editor Web Part to hide the desired element.

6. Modern Pages:

   • In modern pages, you can use the Script Editor Web Part (if available) or the SPFx (SharePoint Framework) to inject custom CSS.
   • Alternatively, you can link an external CSS file using the File Viewer Web Part or SPFx Application Customizer.

Remember to adjust the class name (custom-hidden) and the element ID (myElement) according to your specific use case. Additionally, consider using the appropriate method based on whether you’re working with classic or modern SharePoint pages. :globe_with_meridians::artist_palette:

References:

• Hide SharePoint Online Page Elements Using CSS1.
• SharePoint Stack Exchange: Hide element using CSS for a modern page2.
• Stack Overflow: Difference between visibility:hidden and display:none3.