How do you autosize the TextArea web component so that the height of TextArea automatically adjust to the height of the Text as the user is typing?
Thank you,
Best regards
You really need to build a custom WebSDK component for this, as that’s the only way to get the value back to Xojo so that you can move other UI elements based on the height of the textarea element in the browser as it updates. You can, however, have a TextArea at the bottom of the page and use the following code to increase the scrollable height of the page client-side.
In the Shown event:
var exec() as String
exec.Add( "let element = document.getElementById('" + me.ControlID + "')," )
exec.Add( " area = element.firstChild;" )
exec.Add( "element.heightTimer = setInterval(() => {" )
exec.Add( " element.style.height = 'auto';" )
exec.Add( " area.style.height = Math.max(area.scrollHeight, " + me.Height.ToString + ") + 'px';" )
exec.Add( "}, 250);" )
me.ExecuteJavaScript( String.FromArray( exec, "" ) )
In the Hidden event:
var exec() as String
exec.Add( "let element = document.getElementById('" + me.ControlID + "');" )
exec.Add( "if (element.heightTimer) clearInterval(element.heightTimer);" )
me.ExecuteJavaScript( String.FromArray( exec, "" ) )
You could also do this with a MutationObserver and it’d be more optimal, but I settled for quick and dirty.
It may be worth creating a Feature Request to add an AutoHeight property to WebTextArea. It wouldn’t be terribly difficult to add.