The new wiki page editor makes editing content on SharePoint pages a ton easier. This lets site administrators and others easily edit text on the page as well as drop in web parts, pictures, and videos wherever they want on the page. I find that the editor works pretty well. However, depending on what is on the page, sometimes I find that I struggle with moving things around and removing white space. A lot of white space tends to get inserted as you add more things to the page. I like to keep things close together so I find myself looking to clean things up a lot. It is just hard to get the WYSIWYG editor to remove some of this sometimes.
As a developer the answer might be obvious to you, but as an end user, you may not know where to go. That is why I thought I’d write up this quick post. Consider the following page in edit mode.
The trick here is that we want to edit the raw HTML of the page. Don’t be scared, it’s easy to do and if you are careful, you won’t break anything. If you do break something, you can always go back to your last version. In the bottom right of the ribbon, there is an HTML button, click on it and then click Edit HTML.
You will then see a popup with the HTML markup for that section of the page.
There is a lot to take in here. However, since we’re just looking to remove white space, we’re just looking for one particular line. In this case, we want to remove the following:
In my example, you might notice that I have that listed several times. I will remove each one I don’t want. It may take some trial and error because it might not be obvious what some of the things are. For example, the div tags in the window above are actually references to web parts. Remove those lines I mentioned above and you will have a lot less white space on the page. When you are done, click OK and you will see how you changed the page. Click Save & Close, if you are happy with your changes. If you do mess something up, just go to the ribbon, click the arrow underneath Save and Close and click Stop Editing. The prompt will ask you if you want to save or not. Just click No and you can try again.
I find myself doing this a lot on demos when I am customizing the page a lot through the browser. I thought it would be a good tip for anyone that wants a little more flexibility with how things are shown on the page.