Hello,
I’m working in API V 4.20. I’m trying to make a text-area input in the Editor Widget. I currently have this implemented using the (editorType : “text-area”) property, but I’m experiencing some behavior I don’t understand. I get a text area field, but it will only expand horizontally when grabbing the handle shown below.
I noticed that the editorType property has been deprecated, but I have not been able to achieve the same effect using the suggested workflow below. Does anyone know how to allow the text area to expand vertically as well? Or how to implement TextAreaInput?
Thank You!
“editorType String
Since: ArcGIS API for JavaScript 4.10
Deprecated since version 4.16
The type of editor to use for string field types. Possible values are in the table below. The preferred way to set the editor type is via TextAreaInput or TextBoxInput classes set within the field element of a FeatureForm's template.”
Here is my current Editor Widget
// Edit widget
const editor = new Editor({
view: view,
container: "sidePanel",
allowedWorkflows: ['create','update'],
layerInfos: [{
layer: 'layer,
fieldConfig: [
{
name: "LOCATION",
label: "Location",
editorType: "text-area"
}
],
deleteEnabled: false
}]
Solved! Go to Solution.
I got this figured out. Adding the below to my CSS allowed for resizing in both directions.
.esri-feature-form__input {
resize: both !important;
}
When I setup my Editor at 4.20, I'm using the 'stringFieldOption' attribute to set the field type to "text-area", which I think predetermines the editor to adjust to it.
editor = new Editor({
view: view,
allowedWorkflows: ["update"], // allows only updates and no adds
layerInfos: [{
layer: busStopLayer,
fieldConfig: [
{
label: "Location",
initialState: "collapsed",
description: "General location information",
fieldConfig: [
{ name: "Location", label: "Location" },
{ name: "Owner", label: "Owner" }
]
},
{
label: "Structure",
initialState: "collapsed",
description: "Information about the bus stop",
fieldConfig: [
{ name: "StopType", label: "Type of Stop" },
{ name: "Condition", label: "Condition Assesment" },
{ name: "ConditionDate", label: "Date of Condition Assessment", formatter: formatTimestamp },
{ name: "Comments", label: "Add any general comments", stringFieldOption: "text-area" }
]
},
enabled: true
}],
container: "editDiv",
});
view.ui.add("editDiv", { position: "top-right", index: 2 });
I got this figured out. Adding the below to my CSS allowed for resizing in both directions.
.esri-feature-form__input {
resize: both !important;
}