Changing Episerver PropertyList Modal Size

I have worked with Episerver's PropertyList on several occasions, and the one problem that I have consistently run into is the fact that the modal that appears in the editor view is too small for some scenarios. Specifically, when using XhtmlString properties.

Jump to implementation

This becomes an issue for editors due to the fact that there is no horizontal scroll functionality in the modal. So if editors want to center content they may need to do some workarounds such as adding white space to have the TinyMCE center around the content they wish to see.

In looking for solutions to this problem, I was able to track down some CSS updates that could be made to resolve this. However, finding it wasn't the quick Google search I have come to appreciate. So I thought I would post it here with the hope it will be easier to find for the next person.

As I said I found this solution elsewhere, so props to Minesh Shah who posted what I found on the Episerver forums.

Episerver TinyMCE 2.0 Configuration

I know with the latest updates to TinyMCE in Episerver 11 you are able to customize the size of the editor down to the content type based on your configuration. However, custom configurations can only be added to instances of IContentData. And pages that implement your custom PropertyList cannot access those XhtmlString properties to apply custom configurations. Plus I think it would be better from an editor experience to increase the size of the modal instead of decreasing the size of the rich text area.

How To Change the PropertyList Modal Size

Creating the Property

The process for creating a PropertyList is pretty straight forward. The implementation here you can find it in my Github repo using the Alloy demo site.

First, I created a custom type along with a property type definition.

public class ContentProperty
{
    [Display(Name = "Title Content")]
    public virtual string Title { get; set; }

    [Display(Name = "Rich Text Content")]
    public virtual XhtmlString MainContentArea { get; set; }
}

[PropertyDefinitionTypePlugIn]
public class ContentPropertyListTypeDefinition : PropertyList<ContentProperty> { }

Then, I added the property to one of the Alloy page types, ProductPage.

[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ContentProperty>))]
[Display(
    Name = "Example Property List",
    GroupName = SystemTabNames.Content)]
public virtual IList<ContentProperty> PropertyListExample { get; set; }

And thats all you need to create the actual property.

Adding the CSS

As you saw in the image at the start of the article, the MainContentArea property does not fit within the modal. We can resolve this by updating the following:

First, update the module.config in the root of the web project. If you do not have the module.config file, you can add it and include the following:

<?xml version="1.0" encoding="utf-8"?>
<module>
    <assemblies>
	    <!-- This adds the Alloy template assembly to the "default module" -->
        <add assembly="Alloy Demo Site" />
    </assemblies>
    <clientResources>
        <add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
    </clientResources>
    <dojo>
        <paths>
            <add name="alloy" path="Scripts" />
        </paths>
    </dojo>
</module>

If you already have the config, add node with name epi-cms.widgets.base under the clientResources node if you don't have one already. That referenced CSS is where we will add our styling updates.

Second, update the CSS file referenced in the module.config. In this example, it will be in ~/ClientResources/Styles/Styles.css. In that CSS file, add the following:

.Sleek .epi-dialog-landscape .dijitDialogPaneContentArea {
    height: 500px !important;
}

.Sleek .epi-dialog-landscape, .Sleek .epi-dialog-portrait, .Sleek .epi-dialog--auto-height {
    width: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}

The CSS adjusts the height and width of the modal, and centers it on the page.

Update 6/3/2019 - Since the CSS adjusts the size of the modal to fit the content, it has found to be too small in some instances. Specifically, when the modal that renders the page tree for selecting a content reference is being used. We have found that epi-collection-editor--dialog instead of .Sleek .epi-dialog-landscape, .Sleek .epi-dialog-portrait targets the modal for IList properties specifically and may be a better option for editor experience depending on your situation.

Final Thoughts

The final result provides a much better editor experience. As I mentioned before this is nothing new, but hopefully you were able to find this faster than I found the solution. As always, if you have any questions or thoughts on how to improve this solution, feel free to reach out.