Search code examples
htmljquery-mobilejquery-mobile-table

JQM table is deformed with android small screen resolution?

enter image description hereI 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

Solution

  • 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.