EasyUI Forum
May 05, 2024, 11:30:10 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: resizing a textbox inside a tabs on version 1.4.2  (Read 12767 times)
jrnfs
Newbie
*
Posts: 16


View Profile Email
« on: April 17, 2015, 08:38:11 AM »

The following code is not working on 1.4.2  Embarrassed.
What am I missing?
Tks,

Code:
<!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>
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: April 17, 2015, 06:11:29 PM »

Please try to use the following code instead.
Code:
<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>
« Last Edit: April 19, 2015, 07:17:42 PM by jarry » Logged
jrnfs
Newbie
*
Posts: 16


View Profile Email
« Reply #2 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); Embarrassed
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  Undecided)
btw, sorry my English.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #3 on: April 19, 2015, 07:20:45 PM »

Please try the updated code again, or refer to this example https://jsfiddle.net/dzek3m0p/
Logged
jrnfs
Newbie
*
Posts: 16


View Profile Email
« Reply #4 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?

Code:
<!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.
« Last Edit: April 22, 2015, 11:13:47 AM by jrnfs » Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #5 on: April 22, 2015, 06:04:11 PM »

Just add 'table-layout:fixed' style to your <table> element.
Code:
<table style="width:100%;table-layout:fixed">
    <tr>
        <td>
            Name<br>
            <input id="user_name" class="easyui-textbox" data-options="width:'100%'">
</table>
Logged
Pages: [1]
  Print  
 
Jump to:  

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