JQM table is deformed with android small screen resolution?

Question

enter image description here I am using JQM table in my html and included all neccesary jQuery file. Please find below my code.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.4.2.min.css">
    <link type="text/css" href="jqueryMobile/jquery.mobile.inline-svg-1.4.2.min.css" rel="stylesheet">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.2.min.js"></script>

<div data-role="page" id="pageten">
    <div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
        <h2>My Services</h2>
    </div>

    <div>
        <input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
        <input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
    </div>
    <br>
    <div data-role="content">
        <div>
            <table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;">
                <thead>
                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
                        <th data-priority="1" style="text-align: center">Available Activation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="font-size: 15px; text-align: center">
                        <th style="text-align: center">0</th>
                        <th style="text-align: center">25</th>
                    </tr>

                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
                    </tr>

                </tbody>
            </table>

        </div>

        </div>

    <div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">

        <div class="ui-block-a">
            <input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
            <span>Current Services</span>
        </div>

        <div class="ui-block-b">
            <input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
             <span>Add Services</span>
        </div>

        <div class="ui-block-c">
            <input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
            <span>Remove Services</span>
        </div>
    </div>
</div>

Please Find Image attachment, it displayed deformed table on UI Screen of simulator with red Rectangular bracket whereas it should be like in green rectangle. I am not getting reason of Why its getting distorted. Please help me with it

Can we start some Discussions about it Guys? This question is quite urgent to me. — Sanjay Bhatt, Jun 20 '14 at 05:20
@PawanAryan: I dont have multiple columns but yes using that i got expected table but i was getting column option above so to avoid it i had to keep data-mode="none" which vinay answer below. Thanks for your valuable comment. — Sanjay Bhatt, Jun 20 '14 at 05:40

score 1 · Accepted Answer · answered Jun 20 '14 at 05:32

you need to use data-mode="none" on your table, this will keep the high priority columns intact. and also doesnt show the option to hide the columns manually.

here is the working code

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
    <link type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="pageten">
    <div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
        <h2>My Services</h2>
    </div>

    <div>
        <input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
        <input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
    </div>
    <br>
    <div data-role="content">
        <div>
            <table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;" data-mode="none">
                <thead>
                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
                        <th data-priority="1" style="text-align: center">Available Activation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="font-size: 15px; text-align: center">
                        <th style="text-align: center">0</th>
                        <th style="text-align: center">25</th>
                    </tr>

                    <tr style="font-size: 15px; text-align: center">
                        <th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
                    </tr>

                </tbody>
            </table>

        </div>

        </div>

    <div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">

        <div class="ui-block-a">
            <input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
            <span>Current Services</span>
        </div>

        <div class="ui-block-b">
            <input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
             <span>Add Services</span>
        </div>

        <div class="ui-block-c">
            <input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
            <span>Remove Services</span>
        </div>
    </div>
</div>
</body>
</html>

hope it helps.

JQM table is deformed with android small screen resolution?

1 Answers1