February 17, 2013

Remove Additional Padding on Horizontal Web Part Zones

I was recently building a custom page layout and came across another fun SharePoint intricacy. The page layout contained two web part zones: one with horizontal orientation above one that was vertically-oriented. Specific web parts were destined to use this layout, and it was important that they all lined up nicely. Unfortunately, by default, SharePoint renders an extra table cell at the end of each horizontal web part zone, and this extra cell was preventing the desired alignment.

Web Parts 1 and 2 are in the horizontal zone; Web Part 3 is in the vertical zone underneath.
At first I hoped this could be easily solved with some CSS, but the spacing isn't caused by a simple or consistent margin, padding, or width value. This meant the only way to solve the problem was with some handy jQuery, as we need to use the fancy :last selector to get the right TD element. Note that in the code below, "cbl_wpz_LeftTop" is the ID of the DIV element I have surrounding the horizontal web part zone.

I added this right into the page layout, but of course you could create a separate JS file and reference it from either the page layout or your master page depending on your situation. With the update, the extra table cell is removed from the DOM and all is well:

Much better! Both the left and right sides are aligned as expected.

Hopefully this comes in handy for someone down the road!

1 comment: