JqxTextArea automatic height resize

[fabricebParticipant]

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

[svetoslav_borislavovParticipant]

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 Borislavov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts