Overlapping properties in edit mode

Markiemark

Vote:

Hi,

I would like to make an image with overlapping text both editable in on-page editing.

According to this blog post and this forum thread it should be possible to do this by using the data-epi-overlay-z-index attribute.

I created this simple example but it doesn't work:

 x.HeaderImage)>
     x.Heading)>@Model.Heading

Only the image is editable on-page, not the heading.

Any suggestions to make this work?

Using EPiServer version 8.10.0

#123659

Jul 13, 2015 16:43

Grzegorz Wiecheć

Vote:

Hi,

I tested this scenario on Alloy site. It looks like overlaping properties doesn't mean nesting properties. When properties are nested like in your example then the OnPage editor for nested span is not renderred.

You could use the markup like:

<div data-epi-overlay-z-index="1000" style="height: 250px;background-image: url('@Url.ContentUrl(Model.HeaderImage)');" @Html.EditAttributes(x => x.HeaderImage)>
   
</div>

 <span data-epi-overlay-z-index="2000" @Html.EditAttributes(x => x.Heading)>@Model.Heading</span>

Then using CSS styles make those two elements overlaping and then data-epi-overlay-z-index should work.

Also you could add a condition to your markup view: PageEditing.IsInEditMode.

If true (editor view) then render markup with non-nested elements. If false (end user view) then render nested elements (even without editors) .

#123665

Jul 14, 2015 9:45

Markiemark

Vote:

Hi Grzegorz,

You are complete right about the nesting of the properties. If I take your example code and style the heading over the image it works perfectly.

Thanks a lot!!

Mark

#123666

Jul 14, 2015 11:05

Try our conversational search powered by Generative AI!

Overlapping properties in edit mode