jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › JqxTextArea automatic height resize
Tagged: JqxTextArea automatic height
This topic contains 1 reply, has 2 voices, and was last updated by svetoslav_borislavov 2 days, 17 hours ago.
-
Author
-
Hi,
I want my TextaAreas to resize dynamicly when user adds longs texts.
It works with this code :
HTML
`<textarea class=”autoresizing” id=”sai_Commentaire” rows=”2″></textarea>JS :
$(‘.autoresizing’).on(‘input’, function()
{
this.style.height = ‘auto’;if(this.scrollHeight > 20)
{
this.style.height =
(this.scrollHeight) + ‘px’;
}
});But if I use jqxTextArea, this code does’nt work anymore, because jqytxtArea deletes my class autoresizing and transform the simple textarea in multiples divs.
if I change
$(‘.autoresizing’).on(‘input’, function()
with
$(‘#sai_Commentaire’).on(‘input’, function(),
the “this” variable is an array of multiple sub-arrays with random-names, so its a nightmare to try to find the Div to autoresize.<div id=”sai_Commentaire” aria-disabled=”false” class=”jqx-panel jqx-panel-darkblue jqx-widget jqx-widget-darkblue jqx-widget-content jqx-widget-content-darkblue jqx-text-area jqx-text-area-darkblue jqx-rc-all jqx-rc-all-darkblue” hint=”true” style=”width: 100%; height: 50px;”><div style=”overflow: hidden; width: 100%; height: 100%; background-color: transparent; appearance: none; outline: none; border: 0px; padding: 0px; margin: 0px; left: 0px; top: 0px; position: relative;”><textarea class=”jqx-text-area-element jqx-text-area-element-darkblue jqx-widget jqx-widget-darkblue jqx-widget-content jqx-widget-content-darkblue” id=”sai_CommentaireTextArea” rows=”2″ placeholder=”Saisissez votre texte …” style=”width: 1286px;”></textarea><div id=”jqxWidget9ee128693345″ style=”left: 1288px; top: 0px; position: absolute; width: 13px; height: 48px; visibility: visible;” class=”jqx-scrollbar jqx-scrollbar-darkblue jqx-widget jqx-widget-darkblue jqx-widget-content jqx-widget-content-darkblue jqx-rc-all jqx-rc-all-darkblue”><div id=”jqxScrollOuterWrapjqxWidget9ee128693345″ style=”box-sizing: content-box; width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;” class=”jqx-reset jqx-reset-darkblue”><div id=”jqxScrollWrapjqxWidget9ee128693345″ style=”box-sizing: content-box; width: 15px; height: 100%; left: 0px; top: 0px; position: absolute;” class=”jqx-reset jqx-reset-darkblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-darkblue”><div id=”jqxScrollBtnUpjqxWidget9ee128693345″ style=”box-sizing: content-box; left: 0px; top: 0px; position: absolute; width: 13px; height: 13px;” class=”jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-darkblue jqx-rc-t jqx-rc-t-darkblue”><div class=”jqx-reset jqx-reset-darkblue jqx-icon-arrow-up jqx-icon-arrow-up-darkblue”></div></div><div id=”jqxScrollAreaUpjqxWidget9ee128693345″ style=”box-sizing: content-box; left: 0px; top: 15px; position: absolute; height: 4px; width: 13px;” class=”jqx-reset jqx-reset-darkblue”></div><div id=”jqxScrollThumbjqxWidget9ee128693345″ style=”box-sizing: content-box; left: 0px; top: 19px; position: absolute; width: 13px; height: 10px; visibility: inherit;” class=”jqx-scrollbar-thumb-state-normal jqx-scrollbar-thumb-state-normal-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue jqx-rc-all jqx-rc-all-darkblue”></div><div id=”jqxScrollAreaDownjqxWidget9ee128693345″ style=”box-sizing: content-box; left: 0px; top: 29px; position: absolute; height: 2px; width: 13px;” class=”jqx-reset jqx-reset-darkblue”></div><div id=”jqxScrollBtnDownjqxWidget9ee128693345″ style=”box-sizing: content-box; left: 0px; top: 33px; position: absolute; width: 13px; height: 13px;” class=”jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-darkblue jqx-rc-b jqx-rc-b-darkblue”><div class=”jqx-reset jqx-reset-darkblue jqx-icon-arrow-down jqx-icon-arrow-down-darkblue”></div></div></div></div></div></div></div>
It would be very useful if you could implement your jqxTextArea with autoresize functions.
Do you have any advice to success in this autoresize with some JS code ?
many thanx for your help.
fabriceb
Hi,
Hi! Have a look at the example in Smart HTML Elements: https://www.htmlelements.com/demos/multilinetextbox/overview
the element has got an auto-expand property.
Here is an example:<smart-multiline-text-box auto-expand placeholder="smart Text Area" ></smart-multiline-text-box> <script> const multilinetextbox = document.querySelector('smart-multiline-text-box'); multilinetextbox.autoExpand = true; </script>
Best Regards,
Svetoslav BorislavovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.