Title: resizing a textbox inside a tabs on version 1.4.2
Post by: jrnfs on April 17, 2015, 08:38:11 AM
The following code is not working on 1.4.2 :-[. What am I missing? Tks, <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h3>Tasks:</h3>
<ul style="font-size:1.1em">
<li>The second tab should be selected on page load;</li>
<li>When resizing the browser the textbox (id="user_name") should be resized too;</li>
</ul>
<p>This code works fine on 1.4.1 but don't on 1.4.2</p>
<div id="tt" class="easyui-tabs" style="width:90%;margin:auto;height:auto">
<div title="About" style="padding:10px">
<p>bla, bla, bla...</p>
</div>
<div title="User Info" style="padding:16px;display:table">
<div style="display:table-cell;padding-right: 4px">Id<br>
<input id="user_id" class="easyui-textbox">
</div>
<div style="width:100%;display:table-cell">Name<br>
<input id="user_name" class="easyui-textbox" style="width:100%">
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#tt').tabs('select', 1);
});
</script>
</body>
</html>
Title: Re: resizing a textbox inside a tabs on version 1.4.2
Post by: jarry on April 17, 2015, 06:11:29 PM
Please try to use the following code instead. <div id="tt" class="easyui-tabs" style="width:90%;margin:auto;height:auto">
<div title="About" style="padding:10px">
<p>bla, bla, bla...</p>
</div>
<div title="User Info" style="padding:16px;">
<div style="width:100%;display:table;table-layout:fixed">
<div style="width:200px;display:table-cell;padding-right: 4px">Id<br>
<input id="user_id" class="easyui-textbox" style="width:100%">
</div>
<div style="display:table-cell">Name<br>
<input id="user_name" class="easyui-textbox" style="width:100%">
</div>
</div>
</div>
</div>
Title: Re: resizing a textbox inside a tabs on version 1.4.2
Post by: jrnfs on April 19, 2015, 04:36:07 PM
thank you for ur answer, but it did not work (the text width is now just 10px wide); :-[
Another thing: the second page IS NOT selected when the page is loaded (on 1.4.2).
I guess there is something missing in 1.4.2 resize event (please, be patient, I'm new :-\)
btw, sorry my English.
Title: Re: resizing a textbox inside a tabs on version 1.4.2
Post by: jarry on April 19, 2015, 07:20:45 PM
Please try the updated code again, or refer to this example https://jsfiddle.net/dzek3m0p/
Title: Re: resizing a textbox inside a tabs on version 1.4.2
Post by: jrnfs on April 20, 2015, 07:34:30 PM
thank you so much for your help, but I still have a problem. Can you check this version? <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="mobile-web-app-capable" content="yes">
<meta name='viewport' content="initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>easyui 1.4.2 test</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<script src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h3>Tasks:</h3>
<ul style="font-size:1.1em">
<li>The second tab should be selected on page load;</li>
<li>When resizing the browser the textbox (id="user_name") should be resized too;</li>
</ul>
<p>This code works fine on 1.4.1 but don't on 1.4.2</p>
<div id="tt" class="easyui-tabs"
data-options="
pill:true,
plain:true,
border:false"
style="width:90%;margin:auto;height:auto">
<div title="About" style="padding:10px">
<p>bla, bla, bla...</p>
</div>
<div title="User Info" style="padding:16px;">
<div class="easyui-accordion" data-options="width:'100%'">
<div data-options="title:'Details'" style="padding:8px">
<table style="width:100%">
<tr>
<td>
Name<br>
<input id="user_name" class="easyui-textbox" data-options="width:'100%'">
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#tt').tabs('select', 1);
});
</script>
</body>
</html> Again, it works as expected on 1.4.1. Tks for your time.
Title: Re: resizing a textbox inside a tabs on version 1.4.2
Post by: jarry on April 22, 2015, 06:04:11 PM
Just add 'table-layout:fixed' style to your <table> element. <table style="width:100%;table-layout:fixed">
<tr>
<td>
Name<br>
<input id="user_name" class="easyui-textbox" data-options="width:'100%'">
</table>
|