Блог

Главная - Вопросы по программированию - Таблица JQM деформируется при малом разрешении экрана Android?

Таблица JQM деформируется при малом разрешении экрана Android?

#html #jquery-mobile #jquery-mobile-table

#HTML #jquery-мобильный #jquery-mobile-table

Вопрос:

введите описание изображения здесьЯ использую таблицу JQM в своем html и включил весь необходимый файл jQuery. Пожалуйста, найдите ниже мой код.

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

Пожалуйста, найдите вложение с изображением, оно отображало деформированную таблицу на экране пользовательского интерфейса симулятора с красной прямоугольной скобкой, тогда как она должна быть как в зеленом прямоугольнике. Я не понимаю, почему она искажается. Пожалуйста, помогите мне с этим

Комментарии:

1. Можем ли мы начать некоторые обсуждения об этом, ребята? Этот вопрос для меня довольно актуален.

2. Не могли бы вы попробовать использовать ‘columntoggle’

3. @PawanAryan: у меня нет нескольких столбцов, но да, используя это, я получил ожидаемую таблицу, но я получал опцию столбца выше, поэтому, чтобы избежать этого, мне пришлось сохранить data-mode =»none», на что ответьте ниже. Спасибо за ваш ценный комментарий.

4. хорошо, отлично. Наконец-то это работает для вас.

Ответ №1:

вам нужно использовать data-mode="none" в своей таблице, это сохранит столбцы с высоким приоритетом нетронутыми. а также не показывает возможность скрыть столбцы вручную.

вот рабочий код

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

надеюсь, это поможет.

Метки: