Jeremy Davis
Jeremy Davis
Sitecore, C# and web development
Article printed from: https://blog.jermdavis.dev/posts/2018/what-do-you-mean-its-not-editable-any-more

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

Published 29 October 2018
Sitecore HTML ~1 min. read

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:

Field You Can't Edit

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:

Bad Field View

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:

Bad Field Markup

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:

Bad Field Contents

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/>...

↑ Back to top