jquery mobile проблема с позиционированием data-column-btn при горизонтальной прокрутке

Question

Я показываю таблицу данных в jquery mobile с помощью переключателя столбца для адаптивного дизайна. Тем не менее, я также добавил <div style="overflow:auto"> так что пользователь может прокручивать по горизонтали, если он выбирает возможность просмотра слишком большого количества элементов для экрана (некоторые могут утверждать, что это противоречит цели, но это позволяет отображать отчеты, чтобы пользователь мог захотеть эту функцию).

Во всяком случае, моя проблема в том, что когда пользователь прокручивает горизонтально вдоль стола, data-column-btn перемещается вместе с остальной частью стола. Есть ли способ, которым я могу "приклеить" кнопку к правому верхнему углу, чтобы даже при прокрутке остальной части таблицы кнопка оставалась в том же положении?

JS Fiddle здесь: http://jsfiddle.net/LuA8m/

Спасибо всем:)

Answer 1

Вы можете использовать JavaScript для перемещения кнопки в другой DIV. Сначала создайте пустой заполнитель DIV над оберткой таблицы и дайте обертке таблицы DIV ширину 100%:

<div id="colTogglePlaceholder"></div>
<div style="overflow:auto; width: 100%; ">  
    <table  data-role='table' data-theme='a' id='customerListTable' data-mode='columntoggle' class="ui-body-b ui-shadow table-stripe ui-responsive" data-column-btn-mini="true" data-column-btn-text="Columns to Display" data-column-btn-corners="false" data-column-btn-theme="c" data-column-popup-theme="a" >
        <thead>
            <tr>
               etc.

Затем используйте метод jQuery appendTo(), чтобы переместить кнопку в заполнитель DIV:

$(document).on("pageinit", "#customerList", function () {
    $(".ui-table-columntoggle-btn").appendTo("#colTogglePlaceholder");
});

Вот твой обновленный FIDDLE

ПРИМЕЧАНИЕ: это также работает в jQM 1.4