Print Page - [SOLVED] Input box size in easyui-textbox

Title: [SOLVED] Input box size in easyui-textbox
Post by: Ariovaldo on April 15, 2023, 11:04:11 AM

I would like to leave the input box the same size as the number of characters passed in size and respecting maxlenght

this is the input code that appears in the image

Code:

<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'" 
             label="Descrição resumida:<i>opcional</i>" 
             id="aGet7" name="aGet7" size="20" maxLength="20" style="width:400px;">

Title: Re: Input box size in easyui-textbox
Post by: jarry on April 17, 2023, 07:17:15 PM

Please set the 'autoSize' property to true. Make sure to update to the latest version.

Code:

<div>
	<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'"
		label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;">
</div>
<div>
	<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'"
		label="Descrição resumida:<i>opcional</i>" value="Descrição resumidaDescrição resumida" autoSize="true"
		style="min-width:300px;">
</div>

Title: Re: Input box size in easyui-textbox
Post by: Ariovaldo on April 18, 2023, 04:15:59 PM

Grato ;D

Title: Re: Input box size in easyui-textbox
Post by: Ariovaldo on April 19, 2023, 11:30:31 AM

Hello

I tried to run with version 1.10.16 in Freeware Edition, it didn't work as expected. The input continues with text larger or smaller than the box.

Does this mod only work with the Commercial Edition?

The site documentation does not contain the modification, please give me an example of how this autoSize command works, where to place it and the syntaxy

Ari

Title: Re: Input box size in easyui-textbox
Post by: jarry on April 19, 2023, 11:28:51 PM

This is the live example.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>

<body>
	<div>
		<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px'"
			label="Tipo[S/A]:<i>opcional</i>" value="SS" autoSize="true" style="min-width:300px;">
	</div>
	<div>
		<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'"
			label="Descrição resumida:<i>opcional</i>" value="Descrição resumida" autoSize="true"
			style="min-width:300px;">
	</div>
</body>

</html>

Title: Re: Input box size in easyui-textbox
Post by: Ariovaldo on April 20, 2023, 02:29:10 AM

Thanks for answering

Title: Re: Input box size in easyui-textbox
Post by: Ariovaldo on April 20, 2023, 02:53:34 AM

It worked

Code:


<input class="easyui-textbox" data-options="labelAlign:'right',labelWidth:'250px',validType:'length[0,20]'"
			label="Descrição resumida:<i>opcional</i>" value="Descrição resumida" autoSize="true"
			style="min-width:300px;">

When I removed this part:

~~<style="min-width:300px;">~~

now OK
;D

Thank you for your attention

Title: Re: Input box size in easyui-textbox
Post by: Ariovaldo on April 20, 2023, 04:22:04 AM

Suggestion:

Consider the spaces in the size, or calculate the size with the letter W that occupies more spaces and will be able to size the field correctly and proportionally to the font.

it seems easy when I say it, but I know it takes work

Thanks.
;D

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Ariovaldo on April 15, 2023, 11:04:11 AM