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

[fabricebParticipant]

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.

[fabricebParticipant]

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

[svetoslav_borislavovParticipant]

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

[Author]

Posts