Try our conversational search powered by Generative AI!

Rendering of class attributes breaks in the CMS preview


I wonder which way of rendering user added css-classes that would be the prefered one. Currently, I am doing this: 

which is working well (Icon is a string, which should be a class from a icon-font-family) on the live site, but in the cms "preview", the class name gets rendered instead of added as a class attribute. It looks like the string is escaped and outputed as text instead of rendered as a class. How should this be solved?

Oct 10, 2016 14:32

Something like this should work:

<i class="icon @Model.Icon" @Html.EditAttributes(m => m.Icon)></i>

This will render the icon directly without any extras in the class attribute and the edit attributes makes it still work with on page editing in edit mode.

Oct 10, 2016 15:17

Just a reminder... the editing won't work though with this solution, since the CMS will inject the output of the property Icon inside the <i> element when the property is changed by an editor. I would remove the editing attributes completly or create a display template instead which will handle the rendering correctly.

Oct 10, 2016 21:07
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.