OnPage edit overlapping regions | Episerver Developer Community

OnPage edit overlapping regions

Member since: 2011



Is there any possibility to control somehow overlapping OnPage Edit regions? I bet screenshot may explain more that I could.



#70887 May 03, 2013 7:57
  • Member since: 2009

    The "data-epi-overlay-z-index" attribute might be what you need. It lets you handle the z-index for overlapping properties.
    Joel Abrahamsson has written a short blog post about it: 

    #70888 May 03, 2013 8:17
  • Member since: 2011

    Great! That's exactly was we were looking for.

    #70891 May 03, 2013 8:47
  • Member since: 2004

    Yes, the z-index attribute was implemented to handle this type of case. 

    #70929 May 03, 2013 15:54
  • Member since: 2007


    How do we specify this value with the property control? I have tried most settings on the control, eg:

    <EPiServer:Property PropertyName="Image" runat="server">
    	<OverlaySettings z-index="10" />


    #72031 Jun 05, 2013 17:40
  • Member since: 2002

    Just add it as an attribute in the property markup:

    <EPiServer:Property PropertyName="MainContentArea" runat="server" data-epi-overlay-z-index="12345" />

    #72293 Jun 12, 2013 16:41
  • Member since: 2013

    I can't get data-epi-overlay-z-index="100" to work with MVC, tried with and without @Html.EditAttributes

    I have a div containting a div, and want the inner div to have a larger Z-index than the inner (also clickable for another attribute)

    #74405 Aug 27, 2013 13:16
  • Member since: 2011

    Can you post the code? This works for us just fine.


    <figure class="featured-image">
        <span data-epi-overlay-z-index="600" @Html.EditAttributes(x => x.CurrentPa..
        @if (PageEditing.PageIsInEditMode || !string.IsNullOrWhiteSpace(Model.Curr..
            <figcaption data-epi-overlay-z-index="600" @Html.EditAttributes(x => x


    #74410 Aug 27, 2013 14:15
  • Member since: 2013
    <div class="relavant" data-epi-overlay-z-index="700" @Html.EditAttributes(x => x.CurrentPage.Relevant)>
    <div data-epi-overlay-z-index="600" @Html.EditAttributes(x => x.CurrentPage.Innhold)>

    This is how it looks: http://img593.imageshack.us/img593/1249/qwln.png

    class relevant uses float: right, can't see why it's not working :/

    #74413 Edited, Aug 27, 2013 14:27
  • Member since: 2013

    I got it working on another overlapping object, will continue trying

    #74417 Aug 27, 2013 15:13
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
Please login to post a reply