November Happy Hour will be moved to Thursday December 5th.

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

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:

<input name="ctl00$FullRegion$PC_60_1$EditForm$MetaTagDescription$ctl00" class="episize240" type="text" maxLength="255" value="home page meta description"/>

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
Vote:
 

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

#42160
Aug 10, 2010 21:38
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
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
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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.