Rendering of class attributes breaks in the CMS preview

Alfred Yreeeeeeeeeeelin

Vote:

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?

#162076

Oct 10, 2016 14:32

Tim Røgler

Vote:

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.

#162079

Oct 10, 2016 15:17

Johan Petersson

Vote:

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.

#162097

Oct 10, 2016 21:07