CODEWITHSUNDEEP
inputsitecore
Kun-Yao Wang
Kun-Yao Wang

Reputation: 192

Experience Editor input with placeholder rendering issue in Sitecore

this issue happened when a input DOM with placeholder in Sitecore Experience Editor, does someone know how to solve this? 

<div class="form-group">
  <input class="form-control" placeholder="@Html.Sitecore().Field("Placeholder_Test")" value="123" />
</div>

enter image description here

Thanks

Upvotes: 1

Views: 868

Answers (1)

Marek Musielak
Marek Musielak

Reputation: 27132

When Sitecore renders @Html.Sitecore().Field in Experience Editor mode, it adds extra html layout around the field value to allow content authors to edit the text.

So your generated output is something like that:

<input class="form-control" placeholder="<code attr="blah">aa</code><span>this is a text</span>" value="123" />

As you can see, this is not a valid html. And that's why you see incorrect output in Experience Editor.

What it means? That you cannot edit attributes of inputs inside Experience Editor using @Html.Sitecore().Field.

The simplest solution is to just render the value there, like (replace Sitecore.Context.Item with your datasource if needed):

<input class="form-control" placeholder="@Sitecore.Context.Item["Placeholder_Test"]" value="123" />

And to use Edit Frame to allow editing the placeholder text ( https://www.google.com/search?q=sitecore+edit+frame )

Upvotes: 1

Related Questions