Make your PropertyNumber a bit wider

The default style for PropertyNumber in EPiServer is often a bit short if you have number larger than 999 and it also aligns the text to left. An easy way around this is to use EPiServer PropertyControlClassFactory.

Just create a “PropertyNumberWideControl” that inherits PropertyNumberControl and override CreateEditControls to modify the style as you feel like.

namespace Some.Web.SpecializedProperties.Controls
{
public class PropertyNumberWideControl : PropertyNumberControl
{
public override void CreateEditControls()
{
base.CreateEditControls();

base.EditControl.Style.Add("width", "100px");
base.EditControl.Style.Add("text-align", "right");
}
}
}

There are now two ways to make this control override the default PropertyNumberControl.

1.
In Web.Config, find <episerver.baseLibrary><classFactories>. In that node you might find this <add type=”EPiServer.Core.PropertyControlClassFactory, EPiServer” id=”PropertyControlFactory”>, if not add it. Then you have to register your new control and that it should override the old one: <register type=”EPiServer.Core.PropertyNumber, EPiServer” mappedType=”Some.Web.SpecializedProperties.Controls.PropertyNumberWideControl, Some.Web” />.

<episerver.baseLibrary>

<classFactories>
.....
<add type="EPiServer.Core.PropertyControlClassFactory, EPiServer" id="PropertyControlFactory">
<register type="EPiServer.Core.PropertyNumber, EPiServer" mappedType="Some.Web.SpecializedProperties.Controls.PropertyNumberWideControl, Some.Web" />
</add>
</classFactories>
</episerver.baseLibrary>

2. You can also override the control with code. To do that, take a look at this post from Ted Nyberg.