Css 如何将自定义宽度应用于EPiServer属性上的输入字段?

Css 如何将自定义宽度应用于EPiServer属性上的输入字段?,css,asp.net-mvc,episerver,Css,Asp.net Mvc,Episerver,在EpiServer7.5中,我创建了一个新闻文章模型,该模型对各种文本字段具有多个属性。其中一些属性具有StringLength限制。例如,新闻文章的标题装饰如下: [Display( Order = 10, Name = "Title (Headline)", Description = "The article's title (headline). Title also appears in the browser tab.", Prompt =

在EpiServer7.5中,我创建了一个新闻文章模型,该模型对各种文本字段具有多个属性。其中一些属性具有StringLength限制。例如,新闻文章的标题装饰如下:

    [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; }
添加新的新闻文章页面时,我希望将输入显示为比浏览器为元素显示的默认宽度字段更长的字段

我是否可以应用一个类或样式,当它在addpage界面中呈现时,该类或样式将在该字段上操作?或者,是否有一些财产可以装饰财产,使其更长的长度

这是我指的界面的屏幕截图。我想在表格上扩大标题栏。

使用自定义编辑器编辑器/UI提示很容易完成

创建编辑器描述符(继承EditorDescriptor),覆盖ModifyMetadata方法,并设置:

metadata.EditorConfiguration.Add(“样式”,“宽度:300px”)

这将为编辑器的“输入”元素添加一个“样式”属性,使文本框更宽

例如,以下内容将把它添加到所有字符串属性中,而不需要添加UIHint属性,使字符串属性的文本框宽300像素:

[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");
    }
}
[EditorDescriptorRegistration(EditorDescriptorBehavior=EditorDescriptorBehavior.PlaceLast,TargetType=typeof(string))]
公共类WideTextboxEditorDescriptor:EditorDescriptor
{
公共覆盖void ModifyMetadata(ExtendedMetadata元数据,IEnumerable属性)
{
base.ModifyMetadata(元数据、属性);
添加(“样式”,“宽度:300px”);
}
}

这就是我如何在Episerver 7.5及更高版本中定制CMS编辑器视图的外观

  • 创建一个文件EpicCustomizations.css并将其放置在/ClientResources/Styles中/
  • 在您的情况下,将此CSS规则添加到该文件中

    /* Widen the textbox input in the editor views */
    .Sleek .dijitTextBox:not(.epi-categoriesGroup):not(.dojoDndContainer):not(.dijitNumberTextBox ) {
        width: 600px !important;
    }
    
  • 编辑/创建module.config并将其放在根文件夹中

  • 将其插入module.config,以便注册样式表

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

  • 注意:您可能需要根据所使用的epserver版本调整CSS选择器。

    您是说在非编辑模式下查看页面吗?如果是这样的话,那么您应该检查您在CMS视图中的Title属性所在的容器上的样式。登录仪表板后,我选择CMS>编辑>新建页面。这显示了我的“新闻文章”页面,其中包含几个必需的属性(标题、副标题、作者等)。我希望该视图中的标题字段更宽。它似乎有点太窄了,可能有20-22个字符宽。我希望有人添加一个新页面以查看大约50个字符宽的字段。在浏览器中检查该元素时,该输入字段具有以下标记:使用自定义类将字段包装到自定义div中不起作用吗
    @Html.PropertyFor(f=>f.Title)
    谢谢您的帮助。我刚刚在原始帖子的底部添加了一个界面截图。在自定义类中包装该字段只会影响最终显示。我想在用户创建新条目时影响原始显示。
    metadata.EditorConfiguration.Add(“style”,“width:300px”)
    似乎对EpiServer8没有任何影响。