November Happy Hour will be moved to Thursday December 5th.
November Happy Hour will be moved to Thursday December 5th.
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.
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.
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);
control.Controls.Add(this.Controls[0]);
this.Controls.AddAt(0, control);
}
if (!ControlExtension.IsEditable((Control) this))
return;
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))
return;
PropertyDataControl.ApplyAttribute(control, "data-epi-property-overlaysettings", this.ToJson((object) this.OverlaySettings));
}
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).
Hello.
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