Problem:

You have developed a custom web part and under some conditions you want to hide it from view.

A couple of solutions spring to mind;

1. In your CreateChildControls() method you determine that you need to hide the webpart and simply create no controls, effectively returning before any controls are created.
2. At some approriate point in the page processing pipeline, you set your webparts Visible property to false.

These solutions obviously have the desired effect, however you’ll notice that when the page is rendered there is a gap between the one above, below, left or right or your web part, depending on the orientation of the containing web part zone.

Introducing the web part spacer DIV.

When SharePoint renders web parts into web part zones, the WebPartZone (Microsoft.SharePoint.dll) class outputs DIV’s with the class “ms-PartSpacingVertical” or “ms-PartSpacingHorizontal” into the markup, obviously to space out web parts. Even if you hide your web part these DIV’s are still output into the markup.

As an example, in a vertical web part zone, the markup appears as shown below;

And in a horizontal web part zone, the markup is slightly different and appears as shown below;

So how do we get rid of the part spacer when we hide our web part?

The simplest solution I’ve found is to use a small piece of jQuery, combined with the ClientID of our web part.

Using jQuery, we’ll locate the DIV which surrounds our web part (a DIV with an id attribute of ClientID), navigate up the markup tree, locate the next markup sibling and from there locate a DIV with the appropriate class.

For a web part in a vertical web part zone;

$(function(){ $('#ctl00_m_g_1feb91c3_2e8b_48cf_99ab_63528ccd0589').parent().parent().parent().parent().parent().next('DIV.ms-PartSpacingVertical').hide(); });

For a web part in a horizontal web part zone;

$(function(){ $('#ctl00_m_g_1feb91c3_2e8b_48cf_99ab_63528ccd0589').parent().parent().parent().parent().parent().parent().next('TD').find('DIV.ms-PartSpacingHorizontal').hide(); });

So in your web part CreateChildControls(…) method you can output a script block containg the above jQuery, and along with setting the ChromeType to None, this will hide your web part along with it’s associated web part spacer DIV.

Vertical web part zone;

protected override void CreateChildControls()
{
	// ... do I need to hide myself (vertical web part zone)
	if (hideMyWebPart)
	{
		ChromeType = PartChromeType.None;
		Controls.Add(new LiteralControl(
@"<script type="text/javascript">$(function(){ $('#" 
		    + ClientID + 
		  @"').parent().parent().parent().parent().parent().next('DIV.ms-PartSpacingVertical').hide(); });" +
		  @"</script>"));
		return;
	}
	// ... other code
}

Vertical web part zone;

protected override void CreateChildControls()
{
	// ... do I need to hide myself (horizontal web part zone)
	if (hideMyWebPart)
	{
		ChromeType = PartChromeType.None;
		Controls.Add(new LiteralControl(
@"<script type="text/javascript">$(function(){ $('#" 
		    + ClientID + 
		  @"').parent().parent().parent().parent().parent().parent().next('TD').find('DIV.ms-PartSpacingHorizontal').hide(); });" +
		  @"</script>"));
		return;
	}
	// ... other code
}

If your web part will appear in a web part zone of either orientation you can obviously combine these methods, or build a more generic solution if many web parts (on a page) will want to hide themselves.