Specifying width of EPiServer On Page Editing container



I am currently working on a project where there is a top image which is scaled to fit the whole page (width: 100%; height: auto). This image is of course a property in EPiServer and is rendered with <EPiServer:Property> and <RenderSettings> with a tag. This is done because each image is a page which also holds a caption which is displayed on top of the image. The problem though is that in edit mode EPi adds a surrounding span-tag (.epi-editContainer) which causes the image to not span over the whole page width.

My question is if it is possible to specify the width of the added .epi-editContainer to 100%. This could be achieved with css but I think it would be neater to let EPi do this.

Thanks in advance,

David Rutqvist

Jul 11, 2013 15:42

Most of the times EPiServer will wrap your property inside a span. Unless you specify a CustomTagName. This behaviour depends on what kind of Property you are using and how you are rendering your Property.

You can force what kind of wrapper you want to add by using CustomTagName but that might alter how your Property is rendered for visitors, depending on how the rendering of your top image is created.

Jul 12, 2013 10:14

Don't know if you understood me correctly. Yes I do know that EPiServer wraps my properties but my problem is not the visitor's view it is from inside edit-mode where the element is wrapped in a span tag with class .epi-editContainer. In output (visitor's view) there is no wrapping element so then the scaling of the image works. See image below.


Edited, Jul 12, 2013 10:49

In edit mode, EPiServer use the "CustomTagName" to decide what to wrap around your Property and set the data attributes (such as data-epi-property-name) to.

If you don't set a CustomTagName, EPiServer will default to a span when in Edit Mode.

If you have Reflector, DotPeek, ILSpy or similar, take a look at PropertyDataControl and the method ApplyEditAttributes which is used in CreateOnPageEditControls:

    public void ApplyEditAttributes()
      Control control = this.Controls[0];
      if (!control.GetType().IsSubclassOf(typeof (WebControl)) && !control.GetType().IsSubclassOf(typeof (HtmlControl)))
        if (string.IsNullOrEmpty(this.CustomTagName))
          this.CustomTagName = "span";
        control = (Control) new HtmlGenericControl(this.CustomTagName);
        this.Controls.AddAt(0, control);
      if (!ControlExtension.IsEditable((Control) this))
      string propertyNameFromContext = this.GetPropertyNameFromContext(PropertyDataControl.FindParentControl<IContentControl>(control));
      PropertyDataControl.ApplyAttribute(control, "data-epi-property-name", propertyNameFromContext);
      ControlExtension.ApplyCssClass(control, "epi-editContainer");
      if (Enumerable.Any<KeyValuePair<string, object>>((IEnumerable<KeyValuePair<string, object>>) this.RenderSettings))
        PropertyDataControl.ApplyAttribute(control, "data-epi-property-rendersettings", this.ToJson((object) this.RenderSettings));
      if (Enumerable.Any<KeyValuePair<string, object>>((IEnumerable<KeyValuePair<string, object>>) this.EditorSettings))
        PropertyDataControl.ApplyAttribute(control, "data-epi-property-editorsettings", this.ToJson((object) this.EditorSettings));
      if (!Enumerable.Any<KeyValuePair<string, object>>((IEnumerable<KeyValuePair<string, object>>) this.OverlaySettings))
      PropertyDataControl.ApplyAttribute(control, "data-epi-property-overlaysettings", this.ToJson((object) this.OverlaySettings));


Jul 12, 2013 10:56

Fixed it using a custom tag and css class (moved my wrapper to the episerver property instead of having it in the actual user control).

Jul 15, 2013 8:06
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.