Edit Widget - Attribute Inspector Text Input box WIDTH

[philippschnetzer]

I see how to adjust the LABEL width from here http://forums.arcgis.com/threads/57836-Flex-AttributeInspector-field-width...

And I also see how to adjust the MultiLineThreshold (allows you to control when the form text input box grows from a single line to about a 4 line text input box), from here http://forums.arcgis.com/threads/39310-Editor-Widget-Size-of-attribute-textbox

Now, I have one thing left - how to change the width of the text input boxes? I would like to make them a bit wider but not having any luck...any help is much appreciated, thanks!

[MehulChoksey]

Could you try adding custom field inspector?
For code snippet, see:  http://forums.arcgis.com/threads/19995-Easiest-way-to-customize-AttributeInspector-associated-with-a...

[philippschnetzer]

I looked at the above thread....but not being a programmer at heart I really don't even know where to begin inserting a custom field inspector into the current Edit Widget...

Question:  this method would remove the dynamic nature of this widget, correct? Because I have 4 apps using the EditWidget in different ways which are configured through the xml, so for this method to work I would need to create a new EditWidget.mxml for each app so the field could be hard coded, no?

[MehulChoksey · Accepted solution]

Ok Try this:
1.Download and unzip attached skin.its a copy of the default s:TextInput skin that comes with Flex SDK

2. In Flash Builder, copy this skin under com.esri.viewer.skins package.

3. Open the skin added above and set widthInChars property to the width that you want.
The default is 10. I changed it to 50.
s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="50"
              left="1" right="1" top="1" bottom="1" />

4. In defaults.css, add following :

esri|StringField
{
    skinClass:ClassReference("com.esri.viewer.skins.myTextInput")
}

Compile the app and you should be all set.

Mehul

[philippschnetzer]

Mehul,

Well, you made it very easy for me, thanks very much.  Worked like a charm.  Just one last question - the change  widthInChars="50" changes the single line text input boxes but does not affect the width when the multilinethreshhold has been exceeded - meaning the larger text boxes that are square in shape are still only 15 characters wide. 

Thanks again!!

[MehulChoksey]

Could you try setting width instead of widthInChars?

[philippschnetzer]

Mehul,

The "width" setting still only affects the single line text input boxes.  This is not such a huge issue, I can live with it, I do appreciate your time, thanks!

[MehulChoksey]

Steps would be similar as before
add the attached skin under com.esri.viewer.skins package

Change the width and height of the following:

<s:RichEditableText id="textDisplay" heightInLines="10" widthInChars="15" />

and add following to defaults.css

esri|TextField
{
    skinClass:ClassReference("com.esri.viewer.skins.myTextAreaSkin")
}


Mehul

[philippschnetzer]

Mehul,

Thanks for your help.  That worked beautifully.  I never would have found out how to accomplish this..especially not having access to these files....maybe consider putting those files into the flex api download??

[MehulChoksey]

Glad to hear that it worked for you.
Flex SDK is open source. So you do have access to the entire soure.
Easiest way to create copy of the skin is:

1. Right click on say com.esri.viewer.skins package and click New > MXML skins
2. Give a  name and specify host component for which you need to base your skin on.
3. Click finish to create copy of the skin.
See attached.

Mehul