EasyUI Forum
April 27, 2024, 10:29:43 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > [SOLVED] Input box size in easyui-textbox
Pages: [1]
« previous next »
  Print  
Author Topic: [SOLVED] Input box size in easyui-textbox  (Read 1667 times)
Ariovaldo
Newbie
*
Posts: 27


Ariovaldo - São Paulo - SP


View Profile WWW Email
« 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;">
« Last Edit: April 24, 2023, 03:46:44 AM by Ariovaldo » Logged
programming is easy, it is difficult to make programs
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 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>
Logged
Ariovaldo
Newbie
*
Posts: 27


Ariovaldo - São Paulo - SP


View Profile WWW Email
« Reply #2 on: April 18, 2023, 04:15:59 PM »
Grato  Grin
Logged
programming is easy, it is difficult to make programs
Ariovaldo
Newbie
*
Posts: 27


Ariovaldo - São Paulo - SP


View Profile WWW Email
« Reply #3 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
« Last Edit: April 19, 2023, 11:41:10 AM by Ariovaldo » Logged
programming is easy, it is difficult to make programs
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #4 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>
Logged
Ariovaldo
Newbie
*
Posts: 27


Ariovaldo - São Paulo - SP


View Profile WWW Email
« Reply #5 on: April 20, 2023, 02:29:10 AM »
Thanks for answering
Logged
programming is easy, it is difficult to make programs
Ariovaldo
Newbie
*
Posts: 27


Ariovaldo - São Paulo - SP


View Profile WWW Email
« Reply #6 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
Grin

Thank you for your attention
Logged
programming is easy, it is difficult to make programs
Ariovaldo
Newbie
*
Posts: 27


Ariovaldo - São Paulo - SP


View Profile WWW Email
« Reply #7 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.
 Grin
Logged
programming is easy, it is difficult to make programs
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!