Changing the width of a textbox that you see in Edit Mode

Patrick Heneghan

Vote:

Trying to figure out how I would change the width of a textbox that we have under the Information tab in Edit Mode.

I've had a look at the rendered HTML and it looks like this:

That class 'episize240' is in a file called system.css that I'm guessing I'm not supposed to edit. Even if I could edit it, the rendered tag contains no 'id' attribute so I'm not sure I could write a selector for it.

The property type behind this textbox is PropertyString, and I'm guessing that 'episize240' is the default css class for this property type.

Here's the code we're using for the property (we're using PageTypeBuilder):

        [PageTypeProperty(EditCaption = "Meta tag description",
            HelpText = "Meta description for the page",
            SortOrder = 112,
            UniqueValuePerLanguage = true,
            Required = true,
            Searchable = true,
            Type = typeof(PropertyString))]
        public virtual string MetaTagDescription
        {
            get;
            set;
        }

Any ideas?

#42112

Aug 09, 2010 11:25

Lars Bodahl

Vote:

Go to episerver.config file, then find the siteSettings tag and change the uiEditorWidth="500" setting :)

#42160

Aug 10, 2010 21:38

Patrick Heneghan

Vote:

Thanks for the reply Lars, but it's not the Editor that I want to make wider. It's a textbox for a property under the Information tab.

If you go to Edit Mode, choose a page and go to the Edit tab, then go to the Information tab, you see a list of controls (textboxes, checkboxes, etc) - one for each property. How can I change these controls? e.g. add a new CSS class to a textbox.

#42167

Aug 11, 2010 11:23

Lars Bodahl

Vote:

If you use a custom property, you can set all your properties like this:

public override void CreateEditControls()
{
    base.CreateEditControls();
    _tb = this.EditControl;
    _numbOfRows = [fetch from config file];
    if(_numbOfRows == -1)
    {
        // Default values if nothing else declared in config file
        _numbOfRows = 4;
    }
    _tb.Columns = 84;   // ***** This is the width property!! *****
    _tb.TextMode = TextBoxMode.MultiLine;
    _tb.Rows = _numbOfRows;
    _tb.Style["font-family"] = "Arial, Helvetica, Sans-Serif";
    _tb.Text = ToString();
    _tb.ID = Name;

SetupEditControls();
}

If you want to create a css class, you can select your input tags by using . instead of #. # is for selecting by ID and . is for selecting by class name. It depends on which order the css files are read (don't remember right now....), but if your custom css file is read last, this should work:
input.episize240
{
width: 200px;
}

#42168

Aug 11, 2010 11:47

Patrick Heneghan

Vote:

Thanks Lars.

In the end we used a '.browser' file to hook up an adapter to render the control differently, as described on this page:

http://sdk.episerver.com/library/cms5/Developers%20Guide/Web%20Controls/Property%20Types.htm

We customised the code a little so that it would only adapt controls with a specific ID, instead of adapting all short string properties.

#42278

Edited, Aug 17, 2010 16:13