Rendering settings for string property

Patrik Husfloen

Vote:

I have a property (of type string) that gets rendered like this in the output (MVC view)

@Html.PropertyFor(m => m.MyString) More text here

In edit mode however, it gets rendered as
<MyString Editor>
More text here

Where as I want:
<MyString Editor> More text here

in effect, I wish to do a "display: inline-block" on the editor control so the edit view renders closer to the "real" view.

I've been reading this:
http://sdkbeta.episerver.com/SDK-html-Container/?path=/SdkDocuments/EPiServerFramework/7/Knowledge%20Base/Developer%20Guide/User%20Interface/Object%20Editing/Object%20Editing.htm&vppRoot=/SdkDocuments//EPiServerFramework/7/Knowledge%20Base/Developer%20Guide/

But I haven't been able to make heads or tails out of this thing, i tried something like
@Html.PropertyFor(m => m.MyString, new{editorSettings = new {style = "display: inline-block;"}})
but with no success.

Is this even possible or would I have to replace a large amount of code to enable this behavior?

#62944

Nov 05, 2012 17:28

Johan Björnfot

Vote:

You can control the wrapping html element that will be outputted in edit mode like:

@Html.PropertyFor(m => m.MainLinksHeading, new { customtag="span" })

#62963

Nov 06, 2012 10:00

Dmytro Duk

Vote:

The disadvantage of using span as customtag could be that in this case you may get invalid HTML in Edit mode, since span tag should not wrap other block tags like div, p, etc

So it depends on what is rendered in that wrapping tag in your case.

Other way is setting CSS class for wrapping element using EditContainerClass property:

@Html.PropertyFor(m => m.PropertyName, new { EditContainerClass = "YourInlineBlockStyle" })

Here you specify custom YourInlineBlockStyle CSS class for wrapping element in Edit mode.

Add that class in your site CSS and set display type:

.YourInlineBlockStyle
{
    display: inline-block;
}

All wrapping elements in Edit mode will have epi-editContainer class if you don't specify it explicitly.

#62970

Edited, Nov 06, 2012 10:19

Patrik Husfloen

Vote:

That does indeed solve my problem. The textbox only resizes on lost focus, but it's good enough, at least it lines up correctly now.

Where are these properties documented though, what else can you set/tweak?

Thanks.

#62988

Nov 06, 2012 12:45