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>
Similar articles
- 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
- EPiServer editing delight challenge - MVC solution
- Limiting content and page reference properties to values of a specific type in EPiServer CMS
- Creating a Custom EPiServer Property with a Custom Class as Value
- EPiServer 7 and MVC – Custom tags and CSS classes when rendering properties
Joel Abrahamsson
I'm a passionate web developer and systems architect living in Stockholm, Sweden. I work as CTO for a large media site and enjoy developing with all technologies, especially .NET, Node.js, and ElasticSearch. Read more
