HOW TO: Hide web part when it's empty

Question

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?

smithme · Answer

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;

shinypurple · Answer

smithme&nbsp;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.&nbsp;&nbsp;

fredrik_fjllstrm · Answer

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.

mcads · Answer

Fredrik_Fjllstrm&nbsp;Can you post an example of how to do this?&nbsp; I'm having the same issue.&nbsp;Thanks so much!

nogeekleftbehind · Answer

mcads&nbsp;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: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;
}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.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.Example Usage:Let’s say you want to hide a specific div with the ID myElement when a web part is empty:&lt;div id="myElement" class="custom-hidden"&gt;
    &lt;!-- Content of the element --&gt;
&lt;/div&gt;
If the web part is empty, the myElement div will be hidden due to the applied .custom-hidden class.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.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: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.&nbsp;

Forum Discussion

HOW TO: Hide web part when it's empty

5 Replies

Resources