This topic contains 1 reply, has 2 voices, and was last updated by  svetoslav_borislavov 2 days, 17 hours ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • JqxTextArea automatic height resize #121899

    fabriceb
    Participant

    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

    JqxTextArea automatic height resize #121902

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.