Why are my SiteEdit component regions tiny?

Question

I have the default SiteEdit Inline Editing Template Building Blocks in my compound component template and only see very small editing regions on my published SiteEdit pages.

How do I make the editable regions larger?

Answer 1

I find that often the best way to deal with this is to put the SiteEdit JSON notation in your templates manually. You have full control then over which element the borders are applied to. In this case you also minimise the additional mark-up written out in to your Page.

You can also tweak your CSS to set the height on your SE spans (or alternate elements) to 100%.

Answer 2

The default "wrapping" tag for SiteEdit is <span>. As an inline HTML element, it will collapse to the size of its contents, especially if you don't have any CSS size constraints on the element.

When adding the "Enable SiteEdit" template building block, consider using "div" (no angle brackets) instead for the "Default HTML Tag" parameter.

The SiteEdit border may still be only a few pixels high for empty components, but it will at least stretch the width of the contained area.