November Happy Hour will be moved to Thursday December 5th.

OnPage edit overlapping regions

Vote:
 

Hi,

 

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

http://sdrv.ms/18gKGDa

 

#70887
May 03, 2013 7:57
Vote:
 

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: 
http://joelabrahamsson.com/specify-z-index-for-a-propertys-overlay-in-episervers-on-page-edit-mode/

#70888
May 03, 2013 8:17
Vote:
 

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

#70891
May 03, 2013 8:47
Vote:
 

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

#70929
May 03, 2013 15:54
Vote:
 

Hi,

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" />
</EPiServer:Property>

    

#72031
Jun 05, 2013 17:40
Vote:
 

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
Vote:
 

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
Vote:
 

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
    }
</figure>

    

#74410
Aug 27, 2013 14:15
Vote:
 
<div class="relavant" data-epi-overlay-z-index="700" @Html.EditAttributes(x => x.CurrentPage.Relevant)>
   <h3>Relevant</h3>
   @Model.CurrentPage.Relevant
</div>

<div data-epi-overlay-z-index="600" @Html.EditAttributes(x => x.CurrentPage.Innhold)>
    @Model.CurrentPage.Innhold
</div>

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
Vote:
 

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.
* 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.