HOW TO: Hide web part when it's empty

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. 🌐:artist_palette:

References:

• https://www.c-sharpcorner.com/article/hide-sharepoint-online-page-elements-using-css/https://www.c-sharpcorner.com/article/hide-sharepoint-online-page-elements-using-css/.
• https://sharepoint.stackexchange.com/questions/253550/hide-element-using-css-for-a-modern-pagehttps://sharepoint.stackexchange.com/questions/253550/hide-element-using-css-for-a-modern-page.
• https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynonehttps://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone.