What do you mean it’s not editable any more?

So while battling the jetlag that hit me pretty hard getting back from Sitecore Symposium, this issue came popped up in my bug queue last week. QA reported that a certain component on a test page was not allowing one field to be edited. It had worked in the past, but the behaviour suddenly changed so that one field no longer got the “you can edit this” overlay in Experience Editor. It took me longer than it should have to work out why…

The issue:

Turning on “show controls” in Experience Editor showed the following:

The page’s other fields are all editable, but the “This bit of text…” field isn’t. And oddly an empty edit control has appeared above it. Looking at the view behind the control there are two editable fields:

But in the markup you can see in the browser, there seems to be an editable field with nothing in it, followed by the text for our field, followed by an empty element:

What’s going on there?

Bitten by the HTML specification!

Well the answer is pretty simple really: <p/> elements have rules about what they’re allowed to contain. The rules say you can put “phrasing content” inside a paragraph. And those rules exclude other <p/> elements, or <div/>s.

The content for the broken field was rich text, and looking at the HTML it contained:

There was another <p/> in the markup…

So that’s what was breaking the editing behaviour. The Glass editing control was within a <p/>, but the field contained a <p/>. So the browser was seeing invalid HTML, and closing the first (view) <p/> before it started on the <p/> from the field’s content. That meant Sitecore’s Experience Editor markup was being applied to the first (empty) element, and not to the second one that the browser created – which had the field’s text in it…

So…

The key thing to remember is: When you’re doing the HTML for your views, don’t put <p/> element around a rich text field, unless you’re doing something to restict the rich text to elements that are valid inside a <p/>…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.