How can I apply custom widths to input fields on an EPiServer property?

Question

In EPiServer 7.5, I've created a NewsArticle model that has several properties for various text fields. A few of these properties have StringLength limitations. For example, the title for a news article is decorated like so:

    [Display(
    Order = 10,
    Name = "Title (Headline)",
    Description = "The article's title (headline). Title also appears in the browser tab.",
    Prompt = "Article headline or title",
    GroupName = SystemTabNames.Content
    )]
    [Required]
    [StringLength(100)]
    public override string Title { get; set; }

When adding a new NewsArticle page, I would like to display the input as a longer field than the default width field that the browser displays for elements.

Can I apply a class or style to that will operate on that field when it's rendered in the Add Page interface? Or is there some property that can decorate the property which will make it a longer length?

Here is a screen shot of the interface that I'm referring to. I want to make that Title field wider on that form.

Answer 1

It's quite easy to accomplish with a custom EditorDescritor/UI hint.

Create an editor descriptor (inherit EditorDescriptor), override the ModifyMetadata method, and set:

metadata.EditorConfiguration.Add("style", "width: 300px");

That will add a "style" attribute to the "input" element of the editor, making the textbox wider.

For example, the following will add this to all string properties, without needing to add a UIHint attribute, making textboxes for string properties 300 pixels wide:

[EditorDescriptorRegistration(EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast, TargetType = typeof(string))]
public class WideTextboxEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        metadata.EditorConfiguration.Add("style", "width: 300px");
    }
}

Answer 2

This is how I go about customizing the look of the CMS editor views in Episerver 7.5 and above.

1. Create a file EpiCustomizations.css and place it in /ClientResources/Styles/

2. In your case add this CSS-rule into that file

   /* Widen the textbox input in the editor views */
   .Sleek .dijitTextBox:not(.epi-categoriesGroup):not(.dojoDndContainer):not(.dijitNumberTextBox ) {
       width: 600px !important;
   }
   

3. Edit/Create a module.config and place it in your root-folder

4. Insert this into module.config so that the stylesheet is registered

   <module>
       <clientResources>
           <add name="epi-cms.widgets.base" path="Styles/EpiCustomizations.css" resourceType="Style" />
       </clientResources>
   </module>
   

Note: You might have to adjust the CSS-selector depending on which version of Episerver you're using.