This topic contains 4 replies, has 2 voices, and was last updated by  svetoslav_borislavov 7 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 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

    JqxTextArea automatic height resize #121968

    fabriceb
    Participant

    Hi,

    I’ve never used smart-ui, I’m quite lost with the way of using these tools.

    I’m a registered user of jqwidgets, so I downloaded smart-ui src code and production version from https://www.jqwidgets.com/clientportal/

    1st question : why is the production folder called [smart-webcomponents-trial@14.0.0] ? I should have the released version, not the trial ?

    2nd question : with your example I deal to change value for 1 multilinetextbox in the page, but How can I work on 2 or more multilinetextboxes in the same page ?

    Here is my code, can you help me to control the 2nd multilinetextbox ?
    I use bootstrap 5, jquery3.6, jquery-ui1.13, jqwidgets14 and smart-ui 14:

    in my HEAD section :
    <head>
    (…)
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>
    <!– CSS/JS Bootstrap –>
    <link href=”../commun/libsExternes/bootstrap-5.1.3/css/bootstrap.min.css” rel=”stylesheet” type=”text/css”/>
    <script src=’../commun/libsExternes/bootstrap-5.1.3/js/bootstrap.min.js’></script>

    <!– CSS/JS JQUERY/JQUERYUI –>
    <link href=’../commun/libsExternes/jquery-ui-1.13.1/jquery-ui.min.css’ rel=’stylesheet’ type=’text/css’/>
    <script src=”../commun/libsExternes/jquery/jquery-3.6.0.js”></script>
    <script src=’../commun/libsExternes/jquery-ui-1.13.1/jquery-ui.min.js’></script>

    <!– CSS/JS JQWidgets –>
    <link href=”../commun/libsExternes/jqwidgets/styles/jqx.base.css” rel=”stylesheet” type=”text/css”/>
    <link href=”../commun/libsExternes/jqwidgets/styles/jqx.darkblue.css” rel=”stylesheet” type=”text/css”/>
    <link href=”../commun/libsExternes/jqwidgets/styles/jqx.ui-darkness.css” rel=”stylesheet” type=”text/css”/>

    <script src=”../commun/libsExternes/jqwidgets/jqxcore.js”></script>

    <!– Gestion CSS/JS/SMART-UI –>
    <link rel=”stylesheet” type=”text/css” href=”../commun/libsExternes/smart-ui/styles/smart.default.css” />
    </head>
    <body>
    <div style=”margin-bottom: 15px”>
    <smart-multiline-text-box auto-expand resizable id=”sai_Commentaire1″ value=”test1″></smart-multiline-text-box>
    </div>
    <div style=”margin-bottom: 15px”>
    <smart-multiline-text-box auto-expand resizable id=”sai_Commentaire2″ value=”test2″></smart-multiline-text-box>
    </div>

    <!– Importation des Librairies externes –>
    <script src=”../commun/libsExternes/jqwidgets/jqxscrollbar.js”></script>
    <script src=”../commun/libsExternes/jqwidgets/jqxtextarea.js”></script>

    <script type=”module” src=”../commun/libsExternes/smart-ui/modules/smart.multilinetextbox.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function()
    {
    let oSai_Commentaire;
    let multilinetextbox1, multilinetextbox2;

    initChamps();

    function initChamps()
    {
    multilinetextbox1 = document.querySelector(‘smart-multiline-text-box’);

    multilinetextbox1.value = “Try to add text1”;

    // oSai_Commentaire = document.createElement(‘sai_Commentaire’);
    // oSai_Commentaire = document.querySelector(‘sai_Commentaire’);
    // oSai_Commentaire = $(‘#sai_Commentaire’);
    // oSai_Commentaire.value = “Try to add text2”;
    }
    });
    </script>
    </body>

    many thanks for your help.


    fabriceb
    Participant

    Hi,

    Don’t waste time with my questions about “how to control multiple text-boxes.
    I used another method to control that, with this code :
    oSai_Commentaire = new Smart.MultilineTextBox(‘#sai_Commentaire’, { rows:5, autoExpand: true, resizable:true, readonly :true, verticalScrollBarVisibility:visible});
    oSai_Commentaire2 = new Smart.MultilineTextBox(‘#sai_Commentaire2’, { rows:5, autoExpand: true, resizable:true, readonly :true, verticalScrollBarVisibility:visible});

    There is still one question :
    I’m a registered user of jqwidgets, so I downloaded smart-ui src code and production version from https://www.jqwidgets.com/clientportal/
    why is the production folder called [smart-webcomponents-trial@14.0.0] ? I should have the released version, not the trial ?

    thanx,

    fabriceb

    JqxTextArea automatic height resize #121982

    Hi,

    There is no problem that the folder is called like that. The product in the folder is being unlocked with the license key

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.