Specify z-index for a property's overlay in EPiServer's on page edit mode
Sometimes two property values overlap when rendered in a template. It may for instance be a string property whose value should be rendered on top of an image which is also a property. Or it may be a link/URL property that should be rendered at the of a string property.
By default both properties will have an overlay, the thin blue border that is positioned on top of the element in which the property value is rendered. However, only one of them will be clickable.
To handle that we can specify the z-index for the overlay for the property that isn't clickable. To do so add a data-epi-overlay-z-index attribute to the element that contains the property. For instance, when using ASP.NET MVC and Razor:
<h1 data-epi-overlay-z-index="123" @Html.EditAttributes(x => x.Heading)> @Model.Heading </h1>
- How EPiServer's HTML helper PropertyFor works
- Custom rendering of content areas
- EPiServer 7 and MVC – How to customize rendering of properties
- EPiServer editing delight challenge - Web Forms solution
- Limiting content and page reference properties to values of a specific type in EPiServer CMS
- EPiServer editing delight challenge - MVC solution
- Creating a Custom EPiServer Property with a Custom Class as Value
- EPiServer 7 and MVC – Custom tags and CSS classes when rendering properties