A problem with textbox when width or height property set to 100%

EasyUI Forum

May 02, 2024, 06:06:13 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > Bug Report > A problem with textbox when width or height property set to 100%

Pages: [1]

« previous next »

Author

Topic: A problem with textbox when width or height property set to 100% (Read 11520 times)

aljcn

Newbie

Posts: 15

A problem with textbox when width or height property set to 100%

« on: December 03, 2015, 08:27:04 PM »

Next code works well in EasyUI 1.4.1 version:

Code:


<html>
<head>
    <link rel="stylesheet" type="text/css" href="/lib/js/jeasyui1.4.1/themes/default/easyui.css" />
	<script type="text/javascript" src="/lib/js/jeasyui1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/js/jeasyui1.4.1/jquery.easyui.min.js"></script>
</head>
<body>

<div id="dlgNodeHandle" class="easyui-dialog" style="padding:10px;" title="TestResizeDialog" data-options="width:600,height:450,modal:true,closed:false,resizable:true">
    <table cellspacing="0" cellpadding="4" border="1" width="100%" height="100%">
        <tr>
	    	<td valign="top">
                <input class="easyui-textbox" name="tbHandleInfo" data-options="multiline:true" style="width:100%;height:100%"/>
            </td>
        </tr>
    </table>
</div>

</body>
</html>

When resize dialog, Inner textbox will auto-resize and fit whole dialog. But if change EasyUI Latest Version 1.4.4, It Seems not run ok:

Code:


<html>
<head>
    link rel="stylesheet" type="text/css" href="/lib/js/themes/default/easyui.css" />
	<script type="text/javascript" src="/lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.easyui.min.js"></script>
</head>
<body>

<div id="dlgNodeHandle" class="easyui-dialog" style="padding:10px;" title="TestResizeDialog" data-options="width:600,height:450,modal:true,closed:false,resizable:true">
    <table cellspacing="0" cellpadding="4" border="1" width="100%" height="100%">
        <tr>
	    	<td valign="top">
                <input class="easyui-textbox" name="tbHandleInfo" data-options="multiline:true" style="width:100%;height:100%"/>
            </td>
        </tr>
    </table>
</div>

</body>
</html>

Notice that if textbox is the only elements in dialog, it works well in both two version, but if textbox in table, it can not work.

plz check.


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: A problem with textbox when width or height property set to 100%

« Reply #1 on: December 05, 2015, 07:25:49 PM »

Don't use <table> for layouts. The <div> with CSS offers more flexibility than <table>. If you really want to use the <table> layout, please add the code below to the dialog's 'onResize' event handler.

Code:

$('#dlgNodeHandle').dialog({
	onResize: function(){
		$(this).find('.textbox-f').each(function(){
			$(this).next().css({width:1,height:1});
		}).textbox('resize')
	}
})


	Logged

Pages: [1]

« previous next »