3

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. EPiServer Form

Ken Palmer
  • 2,355
  • 5
  • 37
  • 57
  • Are you talking about viewing the page not in edit-mode? If so, then you should check the styles that you have on the container in which you Title property resides – Vsevolod Goloviznin Nov 21 '14 at 14:15
  • On the CMS view. After logging into the Dashboard, I'm selecting CMS > Edit > New Page. That shows my "News Article" page with several required properties (Title, Subhead, Authors, etc.). I want the Title field in that view to be wider. It seems a bit too narrow, maybe 20-22 characters in width. I'd like someone adding a new page to see an field that's about 50 characters wide. – Ken Palmer Nov 21 '14 at 16:32
  • Inspecting that element in the browser, that input field has this markup: – Ken Palmer Nov 21 '14 at 16:33
  • Does wrapping the field into your custom div with custom class not work? `
    @Html.PropertyFor(f=>f.Title)
    `     – Vsevolod Goloviznin Nov 21 '14 at 17:33
  • Thanks for helping me out. I just added a screen shot of the interface at the bottom of the original post. Wrapping that field in a custom class only impacts the final display. I want to impact the original display when a person creates a new entry. – Ken Palmer Nov 21 '14 at 20:04
  • Aha, got it now, you're fighting with the required fields. I think the only possible solution here is extending the dojo dialog somehow and registering it in the system – Vsevolod Goloviznin Nov 23 '14 at 11:34
  • You can add decorate the field with [UiHint(UIHints.LongString)] to have the textbox render as a text area instead. – Philip Pittle Dec 01 '14 at 00:36

2 Answers2

5

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");
    }
}
Ted Nyberg
  • 7,001
  • 7
  • 41
  • 72
  • `metadata.EditorConfiguration.Add("style", "width: 300px");` doesn't seem to have any affect in EPiServer 8. – xr280xr Feb 17 '16 at 16:03
1

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.

Pegu
  • 31
  • 6